2

ウィンドウのスクロール時に、ツールチップが親の上/下/左/右に正しく表示される必要があります。デモを下にスクロールすると、ツールチップ ブレーキの位置が表示されます。

親の 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();
4

1 に答える 1

0

古いですが、役に立ちます。

これを使用できることを計算するには：

$tt.css('top', abs($c.position().top - $w.scrollTop() - $tt.outerHeight()) );

$c.position().top 上からの要素距離

$w.scrollTop() スクロール値

$tt.outerHeight() あなたのツールチップの高さ

そして、いくつかの数学を実行して絶対値を取得するよりも

于 2014-09-11T14:56:23.570 に答える