[英]JQuery tooltip position
我一直在研究一個簡單的工具提示(見下面的小提琴),但我有一些定位問題。 我希望提示顯示在中心並位於單擊的鏈接上方。 此時左上角位於鼠標單擊處。 我試圖通過工具提示的一半來抵消這個位置,但沒有成功。
查看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;
});
http://jsfiddle.net/CBf4C/15/ - 看到這個。
看看我在這里做的改變: http : //jsfiddle.net/CBf4C/9/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.