工具提示css在li中的位置adsolution

Tooltip css position adsolute in li

本文关键字：位置 adsolution li css 工具提示      更新时间：2023-09-26

我有一个工具提示，用于JS和CSS但当它在<li>中时，它会显示在页面的左侧，而不是像应该的那样显示在图像旁边。

任何想法，不在<li>中时都可以正常工作。以下是代码

JS代码

this.showTooltip = function (a, b) {
    $("#" + b).css("left", $(a).position().left + 20 + "px");
    $("#" + b).css("top", $(a).position().top + "px");
    $("#" + b).fadeIn("slow")
};
this.hideTooltip = function (a) {
    $("#" + a).fadeOut("slow")
};
this.formSubmit = function (a) {
    $("#orderform")[0].submit()
};
this.mainPageShow = function (b, a) {
    $("#header_" + b).hide();
    $("#header_" + a).show()
}

CSS代码

.tooltip {
    position: absolute;
    z-index: 100;
    padding: 10px;
    border: solid 1px #dadada;
    background-color: #f9f9f9;
    width: 200px;
}

HTML代码

<ul>
    <li><img onmouseover="showTooltip(this,'a');" onmouseout="hideTooltip('a');" alt="Tooltip" src="img/content/question.gif" width="20" height="20" align="left" />A</li>
    <li><img onmouseover="showTooltip(this,'b');" onmouseout="hideTooltip('b');" alt="Tooltip" src="img/content/question.gif" width="20" height="20" align="left" />B</li>
    <li><img onmouseover="showTooltip(this,'c');" onmouseout="hideTooltip('c');" alt="Tooltip" src="img/content/question.gif" width="20" height="20" align="left" />C</li>
</ul>
<div class="tooltip" id="a" style="display: none;">A test</div>
<div class="tooltip" id="b" style="display: none;">B test</div>
<div class="tooltip" id="c" style="display: none;">C test</div>

您可以通过删除内联JS代码等来简化您的逻辑。下面是一个工作示例。

HTML:

<ul>
    <li data-tooltip="Tooltip explanation for A"><span>Question A</span></li>
    <li data-tooltip="Tooltip explanation for B"><span>Question B</span></li>
    <li data-tooltip="Tooltip explanation for C"><span>Question C</span></li>
</ul>
<div id="tooltip" class="nd"></div>

CSS：

#tooltip {
    background: #eee;
    border: 1px solid #bbb;
    padding: 5px;
    position: absolute;
}
.nd {
    display: none;
}

JS:

$(function() {
    var tooltip = $("#tooltip");
    $('[data-tooltip]').bind('mouseover', function() {
        var $this = $(this), offset = $this.offset(), posX = offset.left, posY = offset.top;
        posX += $this.find('span').innerWidth();
        tooltip.
            css({left: posX + "px", top: posY + "px"}).
            text($this.attr('data-tooltip')).
            removeClass("nd");
    }).bind('mouseout', function() { tooltip.addClass('nd'); });
});

jsfiddle链接：http://jsfiddle.net/4s9Uz/

正如你所看到的。这很简单。关于这种方法有一些限制和观察：

  • 当元素位于具有溢出规则的元素内（其中包含可滚动内容）时，它可以正常工作
  • 如果元素在右边太远，工具提示将超出视口，并迫使浏览器显示水平滚动条
  • 在这种情况下，您需要像我一样使用span，使工具提示显示在其内容的末尾。如果span标记中的内容有多行，则可能无法正常工作。但这应该得到证实
  • 您只需要具有数据工具提示属性的元素，以及要显示的文本。如果你想展示文本之外的任何东西，你需要改进这种方法

但至少你有一些东西可以与之相处，并进一步提高。

相关文章：