0

このページには次のdivがあります。

<div id="tip">
  Tip text here...
</div>

そして次の1つ：

 <div class="element">
   Element text here...
 </div>

また、次のjs-code：

$(document).ready(function() {
    $('.element').hover(function() {
        $('#tip').css('top', $('.element').position().top);
        $('#tip').css('left', $('.element').position().left);
        $('#tip').fadeIn();
    }, function() {
        $('#tip').fadeOut();
    });
});

ページの左上隅にヒントが表示されます。要素と同じ位置にチップを表示するようにこのコードを修正するにはどうすればよいですか？（コード上でチップと要素を互いに近くに配置することはできません。）

助けてくれてありがとう！

4

5 に答える 5

1

Divタグにタイトルを付けると、ツールチップが表示されます。以下のようにしてみてください....

<div title="ToolTip for Hello World">

Hello World

</div>

このフィドルを参照してください：http：//jsfiddle.net/TPyKS/5/

于 2013-02-10T17:27:25.990 に答える
0

それが私がツールチップを行う方法です：

HTML

<div class="tip" title="Title here">
   Element text here...
 </div>

jQuery

$(document).ready(function() {
    $('.tip').each(function(i, e) {
       var $this = $(e),

           originalTitle = $this.attr('title'),

       //Keep the title
           $title = $('<p class="tooltip" />').html(originalTitle);

       //Remove initial one
       $this.attr('title', '');

       $title.appendTo($this);

    });
    $('.tip').hover(function() {
        $(this).find('.tooltip').fadeIn();
    }, function() {
        $(this).find('.tooltip').fadeOut();
    });
});

Css

.tip {
    position:relative;
}

.tooltip {
    position:absolute;
    display:none;
}

これを使ってcssでツールチップの位置を設定するだけです。title属性は、JavaScriptが無効になっているユーザーにもそれらを表示することを許可します。

フィドルを参照してください。

于 2013-02-10T18:00:53.187 に答える
0

これを試して：

HTML

<div class="element">
   Element text here...
 </div>
<div id="tip">
  Tip text here...
</div>

CSS

#tip{
    position: absolute;
    display: none;
    background: #ccc;
    padding: 10px;
}
.element:hover + #tip{
    display: block;
}
div{
    float: left;
}

デモ：http：//jsfiddle.net/enve/TPyKS/10/

于 2013-02-10T17:50:50.993 に答える
0

.positionは親に対して相対的です。ドキュメントに対して相対的である.offsetを試してください。

于 2013-02-10T18:05:04.693 に答える
0

次の関数を使用して、domElementの絶対座標を決定することができます。左と上のパラメータを指定して、要素の左上隅からの相対的なシフトで位置を取得できます。

var findAbsolutePosition = function(domElement, left, top) {
    if (!parseInt(left)) {
        left = 0;
    } else {
        left = parseInt(left);
    }
    if (!parseInt(top)) {
        top = 0;
    } else {
        top = parseInt(top);
    }

    var box = domElement.getBoundingClientRect();
    var body = document.body;
    var docElem = document.documentElement;
    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop;
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft;

    var clientTop = docElem.clientTop || body.clientTop || 0;
    var clientLeft = docElem.clientLeft || body.clientLeft ||0;

    var position = {};
    position.y = box.top +  scrollTop - clientTop + top*Settings.get('scale'); 
    position.x = box.left + scrollLeft - clientLeft + left*Settings.get('scale');
    position.width=box.width;
    position.height=box.height;

    return position;
}

もう1つの方法は、チップを必要とする要素の近くのDOMにチップ要素を動的に挿入することです。どの方法を使用するかはあなた次第です

于 2013-02-10T20:43:55.907 に答える