如何只在悬停在文本上时才能显示收费？

Question

我必须使用广泛使用以下工具提示的HTML文件：

<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

有没有办法在不改变整个工具提示的情况下将“可暂停”区域限制为文本？ （我真的没有这样做的自由）

谢谢！

Answer 1

尝试使用CSS来限制元素的宽度或填充。

EG。

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

这可能会限制工具提示元素的宽度。

您也可以使用<span>元素。哪个也包含自己边界内的元素。