仅使用 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/

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>