JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<script src="http://cdn.jquerytools.org/1.2.7/tiny/jquery.tools.min.js"></script>
<div id="dyna">
  <img src="image1.jpg" title="The tooltip text #1"/>
  <img src="image2.jpg" title="The tooltip text #2"/>
  <img src="image3.jpg" title="The tooltip text #3"/>
  <img src="image4.jpg" title="The tooltip text #4"/>
</div>

CSS

.tooltip.bottom {
  background:url(/media/img/tooltip/black_arrow_bottom.png);
  padding-top:40px;
  height:55px;
}
 
.tooltip.bottom {
  background:url(/media/img/tooltip/black_arrow_bottom.png);
}

JavaScript

$("img[title]").tooltip({
 
   // tweak the position
   offset: [10, 2],
 
   // use the "slide" effect
   effect: 'slide'
 
// add dynamic plugin with optional configuration for bottom edge
}).dynamic({ bottom: { direction: 'down', bounce: true } });