如何僅在懸停文本時才顯示tolltip？

我有哪裏以下提示被廣泛使用的HTML文件的工作：如何僅在懸停文本時才顯示tolltip？

<div class="tooltip"> 
    Text 
    <span class="popup"> 
    Tooltip 
    </span> 
</div>

而CSS：

.tooltip span[class="popup"] { 
       z-index:10;display:none; padding:7px 10px; 
       } 
.tooltip:hover span[class="popup"]{ 
       display:inline; position:absolute; color:#111; 
       border:1px solid #DCA; background:#fffAF0; 
      }

https://jsfiddle.net/f1tztx15/2/

我的問題是，工具提示不僅出現時我將鼠標懸停在「文本」上，但也懸停在「文本」右側的空白處（請參見下文）。

Tooltip appearing when blank space is hovered

有沒有辦法來限制「hoverable」區域的文本，而不改變整個工具提示？（我真的沒有這個自由）

謝謝！

來源

2016-12-06 bigxtra

在文本週圍添加一個'' - 目前，文本的容器是一個div，它是一個塊元素，這意味着只要您在div內，就會觸發工具提示。我必須說，這是創造我見過的工具提示最糟糕的方式之一。 – junkfoodjunkie

他們正在學習...而不是「這是創造我曾經見過的工具提示最糟糕的方式之一」如何提供一個建議，以改善它... –

哦哇，這很快。它非常棒，非常感謝！ – bigxtra

嘗試使用CSS來限制元素的寬度或填充。

例如，

.tooltip: width: 100%; padding: 0px;

這可能會限制你的提示元素的寬度。您可以使用<span>元素。其中也會包含它自己範圍內的元素。

來源

2016-12-06 23:26:15 Joseph

由於元素的內容可能會有所不同，所以我無法設置固定的寬度。使用元素很好，謝謝！ – bigxtra

很高興幫助一些:) – Joseph

如何僅在懸停文本時才顯示tolltip？

回答

相關問題