Imagine you'd like to have a tool-tip style div hovering over an element:
but you'd like the two divs to be aligned at the center like so:
You can determine the correct value of div #1's left position with some math:
centerDivs = function(a,b) {
var w1 = parseInt(a.outerWidth()), w2 = parseInt(b.outerWidth()), l1 = parseInt(a.position().left);
return l1 - ((w1 - w2)/2);
}
then offset the top div
hintDiv.css({
'zIndex' : 1,
'position' : 'absolute',
'top' : infoDiv.position().top - 45,
'left' : centerDivs(infoDiv, hintDiv)
})
Add a callout triangle to taste.