Question

我创建了某些链接悬停时出现的工具提示。工具提示跨越类tooltiptext，链接使用标识gloss。

问题是工具提示最终成为其中最长字的宽度。我已经尝试设置最小宽度，但这是不切实际的，因为一些工具提示只是几个字，而其他是整个段落。如果有一段文字，我不希望所有文字都在同一行，所以white-space: nowrap也是不切实际的。

有什么想法吗？

#gloss {
  border-bottom: solid 1pt blue;
  position: relative;
  display: inline-block;
  text-decoration: none;
}

#gloss:hover {
  text-decoration: none;
}

.tooltiptext {
  visibility: hidden;
  text-align:center; background-color:#8899ff;
  color: #000;
  border-radius: 6px;
  box-shadow: 2px 2px 1px #aaa;
  border: 1px solid #000;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: all 0.15s ease;
  pointer-events: none;
}

#gloss:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

<br><br><br><br><br>
<!--<br>s to move the paragraph down-->
<p>This is some text, with a <a href="#" id="gloss">link<span class="tooltiptext">Here is some information about the link.</span></a>. And the text continues.</p>

Answer 1

将style="width: auto;"添加到您的span标记中，它将起作用

<br><br><br><br><br>
<!--<br>s to move the paragraph down-->
<p>This is some text, with a <a href="#" id="gloss">link<span style="width: auto;" class="tooltiptext">Here is some information about the link</span></a>. And the text continues.</p>

Answer 2

我已经解决了如下类似的问题。

.tooltiptext {
    max-inline-size: 600px; //or whatever you want there
    width: max-content;
    white-space: normal;
}

停止工具提示跨越包装CSS中的每个单词

2 个答案: