Question

I’m currently hacking away, trying to replicate Coda’s tooltip:
http://jqueryfordesigners.com/coda-popup-bubbles/

Check out my example here: http://jsfiddle.net/timkl/Ccmh3/

I’m following this tutorial, and in this piece the position of the tooltip is hardcoded. However I want the position to adjust dynamically based on the dimensions of the tooltip, so that it is positioned precisely over the trigger-image.

I’m struggling a bit with this, first I wanted to obtain he position of the tooltip like this:

var width = $('.popup').width();
var height = $('.popup').height();

Next I tried to manipulate the position of the popup based on the dimensions of the popup. But my math skills is falling short, I don’t have a clue on how to do this. This is my meager attempt:

    // reset position of popup box
    popup.css({
      top: -(.5*height),
      left: -(.5*width),
      display: 'block' // brings the popup back in to view
    })

Does anybody have an idea on how to go about this?

JSFiddle here: http://jsfiddle.net/timkl/Ccmh3/

Answer 1

You should try with this:

// reset position of popup box
    popup.css({
      top: -height,
      left: -(0.5*width)+5,
      display: 'block' // brings the popup back in to view
    })

The top attribute moves your tootltip above the hoovered element, the left attribute center it over the element. You must compensate also by half the size of your borders/padding/and so on (that’s what the +5 does).

An example here: http://jsfiddle.net/Ccmh3/23/ (after some comments, I also limited the size of the content width, this way, it works better)

Is it what you want?