0

我在页面上有以下 div：

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

以及以下一个：

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

还遵循js代码：

$(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

您可以尝试使用以下函数来帮助您确定 domElement 的绝对坐标。可以提供 left 和 top 参数来获取从元素左上角相对偏移的位置。

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;
}

另一种方法是将tip元素动态插入到需要tip的元素附近的DOM中。使用哪种方法取决于您

于 2013-02-10T20:43:55.907 回答
0

.position 是相对于父级的，试试 .offset，他是相对于文档的

于 2013-02-10T18:05:04.693 回答
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 回答