I have been working on a simple tool tip (see fiddle below), but am having some positioning problems. I would like the tip to appear centered and above the link that is clicked. At the moment the top left corner is positioned at the mouse click. I tried to offset this position by half of the tooltip but to no success.
Check out the changes at http://jsfiddle.net/CBf4C/3/
You need to get the position of the clicked element ( use .position()
), get the dimensions of the tooltip with .outerWidth()
and .outerHeight()
and then calculate based on these..
the actual code is
$('a[title]').click(function(e) {
//fadetooltip and display information
$('body').append('<div class="tooltip"><div class="tipBody"></div></div>');
tip = $(this).attr('title');
var tooltip = $('.tooltip'); // store a reference to the tooltip to use it later
tooltip.fadeTo(300, 0.9).children('.tipBody').html( tip );
// calculate position of tooltip
var el = $(this),
pos = el.position(), // get position of clicked element
w = el.outerWidth(), // get width of clicked element, to find its center
newtop = pos.top - tooltip.outerHeight() , // calculate top position of tooltip
newleft = pos.left + (w/2) - (tooltip.outerWidth()/2); // calculate left position of tooltip
//set position
$('.tooltip').css('left', newleft ) ;
$('.tooltip').css('top', newtop );
hideTip = false;
});
http://jsfiddle.net/CBf4C/15/ - 看到这个。
看看我在这里做的改变: http : //jsfiddle.net/CBf4C/9/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.