Javascript 工具提示css位置在li中为绝对值
我有一个工具提示,我使用的是JS和CSS 但是当它在一个屏幕上时,它会显示在页面的左侧,而不是像它应该显示的那样显示在图像的旁边 不管你有什么想法,当你不在家的时候,它都很好用。 下面是代码 JS代码Javascript 工具提示css位置在li中为绝对值,javascript,html,css,tooltip,Javascript,Html,Css,Tooltip,我有一个工具提示,我使用的是JS和CSS 但是当它在一个屏幕上时,它会显示在页面的左侧,而不是像它应该显示的那样显示在图像的旁边 不管你有什么想法,当你不在家的时候,它都很好用。 下面是代码 JS代码 this.showTooltip = function (a, b) { $("#" + b).css("left", $(a).position().left + 20 + "px"); $("#" + b).css("top", $(a).position().top + "p
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: JS: JSIDLE链接: 如你所见。这很简单。这种方法有一些限制和观察: 当元素位于具有可滚动内容的溢出规则的元素内时,它可以正常工作。 如果元素过于右侧,工具提示将超出视口,并强制浏览器显示水平滚动条。 在本例中,您需要像我一样使用span,使工具提示在其内容结束后立即显示。如果span标记中的内容有多行,则可能无法正常工作。但这应该得到证实。 您只需要包含数据工具提示属性的元素,以及要显示的文本。如果您想显示文本以外的内容,则需要改进此方法。
但至少你还有一些需要处理和进一步改进的地方。你知道绝对定位元素是相对于它们的元素定位的吗?即到最近的元素,该元素不是静态定位的。尽管我在下面给出了答案,但对于您的具体情况,您应该尝试使用偏移量而不是位置。只有当你的/元素被绝对或相对地定位时,位置才会很好地工作,但事实并非如此。偏移量成功了,谢谢
<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>
#tooltip {
background: #eee;
border: 1px solid #bbb;
padding: 5px;
position: absolute;
}
.nd {
display: none;
}
$(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'); });
});