仅使用 css 的工具提示

Question

我有一个只能更改 CSS 的应用程序。例如

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

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

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>

基本上，我增加了一个全角空格*并设置了负text-indent与overflow:hidden隐藏文本的第一部分，从而tooltip My Text here成为My Text here。这有点棘手，您必须小心类名冲突。

* em-space 用于允许一些左填充。

jsFiddle： https ://jsfiddle.net/azizn/gs1ye10r/2/