仅使用CSS实现工具提示

Question

我有一个应用程序，只能更改CSS样式。

例如：

<p class="abc">My Text</p>

我只能更改上述文本中的abc，或者可以在abc旁添加另一个css类。 有没有办法通过编辑css中abc的属性来显示工具提示？ 我只能编辑css文件。 即使工具提示文本也必须放置在css中，或者css可以从任何其他地方引用它。 有任何可能性吗？

- AhmedRana

---

提示文本会是什么？每个元素/类的提示文本会不同吗？ - Paulie_D

另外，如果你可以更改类，为什么不能更改HTML呢？这是同样的事情。你的问题不合逻辑。 - Paulie_D

@Paulie_D 工具提示文本将针对不同的字段而不同。我可以为需要工具提示的每个字段添加不同的类。HTML是由我们无法控制的软件生成的。但是，该软件允许我们为元素分配类。 - AhmedRana

尝试将类名设置为abc" title="tooltip。顺便说一下，如果这样做成功了，应用程序就没有受到XSS攻击的保护。 - Mr Lister

@AhmedRana 在这种情况下，您可以尝试使用负文本缩进偏移量剥离类字母-请参阅我的更新答案。 - Aziz

Answer 1

可以用纯CSS完成吗？可以。但是，使用JavaScript可以得到更多的控制。

body { margin: 3em; }

.tooltip { position: relative; }

.tooltip::before {
  content: "\2003" attr(class); /* print em-space with class text */
  text-indent: -3.9em; /* add negative text offset to hide class name */
  display: inline-block;
  position: absolute; bottom: 50%;
  background: #000; color: #FFF; padding: 5px; border-radius: 5px;
  opacity:0; transition:0.3s; overflow:hidden;
  max-width: 50%; /* avoids very long sentences */
  pointer-events: none; /* prevents tooltip from firing on pseudo hover */
}

.tooltip:hover::before { opacity:1; bottom: 100%; }

<p class="tooltip Tooltip Text">My Text</p>
<p class="tooltip Dolor sit amet bla bla">Lorem Ipsum</p>

基本上，我添加了一个em空格*，并设置了负的text-indent和overflow:hidden来隐藏文本的前部分，使得tooltip My Text here变成了My Text here。这有点hacky，你需要注意类名冲突。

* em空格用于允许一些左边距。 jsFiddle：https://jsfiddle.net/azizn/gs1ye10r/2/

- Aziz

---

我有一个问题。如果我写一行很长的文本，它会拉伸工具提示。是否可以在工具提示中换行或使任何文本部分加粗？ - AhmedRana

@AhmedRana 是的 - 你可以在伪元素中添加 max-width 属性 - https://jsfiddle.net/azizn/gs1ye10r/2/ 我还添加了 pointer-events: none，这样当工具提示被意外触发时就不会有反应。 - Aziz

它在JSFiddle上运行良好，但不幸的是，在我的CSS中它无法工作（可能是由于其他冲突规则）。无论如何，非常感谢！ - AhmedRana

使用devtools检查器来检查应用了哪些CSS。如果CSS中存在冲突的类，则可以添加:not伪选择器，比如.hello:not(.tooltip)。 - Aziz

嗨@Aziz，有没有办法在工具提示中使用RichText或HTML。我尝试在工具提示中使用“<br>”，但它只显示为“<br>”，而不是换行。 - AhmedRana

@AhmedRana 不，你不能使用CSS内容解析HTML - 你必须要么使用JS解决方案，要么更改HTML结构。 - Aziz

Answer 2

看看这个页面 http://www.w3schools.com/css/css_tooltip.asp。

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

- mlegg

---

谢谢你的帮助，但我无法添加这个 span 标签 :( - AhmedRana

为什么你不能这样做？ - mlegg

@mlegg 请仔细阅读问题，原帖作者只能修改 HTML 中的类名。 - Aziz

抱歉，我错过了。 - mlegg