![](/img/trans.png)
[英]JQuery display element by position - tooltip should change position if parent is offscreen
[英]jquery tooltip should change position when offscreen
在窗口上滾動時,工具提示應正確顯示在其父對象的上方/下方/左側/右側。 在我的演示上向下滾動后,Tooltip的位置就會剎車。
如何計算父項的y偏移並將工具提示顯示在正確的位置? 我快到了,不確定丟失了什么。 http://fiddle.jshell.net/j7MWE/
$.fn.tooltip = function () {
var $el = $(this);
var $w = $(window);
var timer;
var delay = 500;
$el.mouseenter(function (e) {
timer = setTimeout(function () {
var $c = $(e.currentTarget);
var $tt = $('<div class="tooltip fade right"><div class="arrow"></div><h3 class="popover-title" style="display: none;"></h3><div class="popover-content"><article class="default"><h1>Anchorman 2: The Legend Continues</h1><ul><button>£10.99 Buy</button><button>£3.49 Rent</button><p>Hilarious comedy sequel starring Will Ferrell and Steve Carell.</p></article></div></div>').appendTo($(e.currentTarget).closest('.item')).fadeIn(300);
$tt.toggleClass('horiz-offscreen', $w.width() < $tt.outerWidth() + $tt.offset().left);
if ($w.height() < $tt.outerHeight() + $tt.offset().top) {
$tt.css('top', $w.scrollTop() + $w.height() - $c.position().top - $tt.outerHeight());
}
}, delay);
});
$el.mouseleave(function (e) {
$('.tooltip', e.currentTarget).fadeOut(500, function () {
$(this).remove();
});
clearTimeout(timer);
});
};
$('.item').tooltip();
它很舊,但是可以幫助您
計算您可以使用以下方法:
$tt.css('top', abs($c.position().top - $w.scrollTop() - $tt.outerHeight()) );
$c.position().top
元素到頂部的距離
$w.scrollTop()
滾動值
$tt.outerHeight()
您的工具提示高度
然后我們進行一些數學運算並獲得絕對值
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.