我一直在研究一个简单的工具提示(见下面的小提琴),但我有一些定位问题。我希望提示显示在中心并位于单击的链接上方。此时左上角位于鼠标单击处。我试图用一半的工具提示来抵消这个位置,但没有成功。
答案 0 :(得分:2)
查看http://jsfiddle.net/CBf4C/3/
上的更改您需要获取所点击元素的位置(使用.position()
),使用.outerWidth()
和.outerHeight()
获取工具提示的尺寸,然后计算基于这些......
实际代码是
$('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;
});
答案 1 :(得分:1)
http://jsfiddle.net/CBf4C/15/ - 请看这个。
答案 2 :(得分:0)
请参阅我在此处所做的更改:http://jsfiddle.net/CBf4C/9/