如何在元素附近的适当位置显示提示

How to show a tip on a proper position near the element?

本文关键字：位置 显示 提示 元素      更新时间：2023-09-26

我在页面上有以下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();
    });
});

它在页面的左上角显示提示。如何修复此代码以在元素的同一位置显示提示？（我不能把提示和元素放在代码上。）

非常感谢你的帮助！

赋予div标签标题显示工具提示。试试下面的。。。。

<div title="ToolTip for Hello World">
Hello World
</div>

看看这把小提琴：http://jsfiddle.net/TPyKS/5/

.position是相对于父级try.offset的，后者是相对于文档

这就是我要做的工具提示：

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的用户也可以看到它们。

见小提琴。

试试这个：

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/

您可以尝试使用以下函数来帮助确定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;
}

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

相关文章：