0

私はこのツールチップを手に入れました：

 $(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $("body").find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip        
    }).mousemove(function(e) {
        var mousex = e.pageX + 20; //Get X coodrinates
        var mousey = e.pageY + 20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex + tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey + tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        } 
        tip.css({  top: mousey, left: mousex });
    });
});

そしてCSS：

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none;
    padding:10px;
    position:relative;z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

使用方法:

<a class="tip_trigger"><span class="tip">This will show up in the tooltip</span></a>

問題：ツールチップが要素内にある場合、ツールチップはposition: relative変更を調整し、ツールチップは離れます...

ツールチップ div がposition: absoluteであるために発生すると思いますが、どうすれば修正できますか?

私の英語はあまり上手ではありません....

編集1：

画像付きの完全な説明: ここに画像の説明を入力

編集 2 : ウェブサイトをアップロードしたので、ライブで見ることができます... URL はhttp://superdown.me/gladiatorです。 両方のフィールドに値「admin」(ユーザー名とパスワード) を入力します。

ログイン後、「37.5%」にマウスを合わせると、ページの上部に表示されます。

4

2 に答える 2

0

position: absolute.tip で使用します。position: relativeon onlyを.tip_trigger使用すると、テキストが反転します。

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none;
    padding:10px;
    position:absolute;
    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

Jsfiddle: http://jsfiddle.net/eKWJe/3/

アップデート

この問題にはおそらく別の解決策がありますが<span class="tip"></span>、コンテナの外に置くことができます。このような：

<body>
  <span class="tip">This will show up in the tooltip</span>
  <div id="header">
      ---
  </div>
</body>

Jsbin: http://jsbin.com/ojuras/2/edit

于 2013-02-11T21:05:10.053 に答える
0

あなたの.tip_trigger位置を相対的にします：

.tip_trigger {
    position: relative;
}

次に、位置を変更します.tip。これで、常に相対的に配置されたアイテム内にあり、一貫性が保たれます。

于 2013-02-11T20:51:53.840 に答える