Dynamic Positioning of the Tooltip

HTML

<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"/>

CSS

.tooltip.bottom {
 background:url(lack_arrow_bottom.png);
 padding-top:40px;
 height:55px;
}

.tooltip.bottom {
  background:url(black_arrow_bottom.png);
}

Javascript

// initialize tooltip  
$("#dyna 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 } 
});

View Example