工具提示css在li中的位置絕對

我有一個工具提示，我使用的是JS和CSS 但是，當它在<li>中時，它顯示在頁面左側，而不是圖像旁邊，就像它應該那樣。工具提示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>

來源

2014-04-15 Garry

您知道絕對定位元素相對於['offsetParent']（https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetParent）元素的位置？即到最接近的元素，它不是靜態的。 – Teemu

儘管我的回答如下，關於你的具體情況，你應該嘗試使用offset（）而不是position（）。如果您的元素絕對或相對定位，位置（）將只能正常工作，但情況並非如此。 – leandroico

抵消了伎倆，謝謝 – Garry

你可以簡單的邏輯，通過去除內聯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標籤中的內容有多行，它可能無法正常工作。但它應該得到證實。
您只需要包含data-tooltip屬性的元素以及要顯示的文本。如果你想展示除文字以外的任何東西，你需要改進這種方法。

但是至少你有什麼可以進一步改進。

來源

2014-04-15 16:10:11 leandroico

工具提示css在li中的位置絕對

回答

相關問題