Question

I am using this jQuery Tooltip plugin.

I am trying to emulate the example for Ex.3 when you hover of it, that is, I would like my tooltip to appear below in my example.

I can get the tooltip to appear correctly but for some reason, is not appearing below but to the right of my hover image.

How can I get it to appear below my image and NOT the right? My image is currently set at the top right of my web page.

Answer 1

Wow that tooltip literally has no documentation other than that page.,, it appears that the tooltip position is based on where it is on the page. The closer it is to the top of the page, the tip will appear below.

Personally, I’d recommend using a different tooltip script that allows you to set the tooltip position. Something like jQuery Tools Tooltip or qTip.

---

Well apparently, the currently released qTip script doesn’t work with jQuery 1.4.2, but you can download the current build version that does work properly.

Here is some sample code to show you how to use it, and a demo:

$(document).ready(function(){
 $("#demo").qtip({
   content: 'Tooltip Content goes here',
   style: { 
      name: 'cream',           // Inherit from preset style
      tip:  'topMiddle'        // adds the pointy part to the tooltip window
   },
   textAlign: 'center',        // Center the tooltip contents
   position: {
    corner: {
     target: 'bottomMiddle',   // Location of tooltip relative to #demo when it opens
     tooltip: 'topMiddle'      // Portion of tooltip that meets with the target
    }
   }
 });
});