Question

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

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

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

Answer 1

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

＆＃13;

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%; }

＆＃13;

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

＆＃13;

基本上我添加了一个 em space * 并设置了一个带有text-indent的否定overflow:hidden来隐藏文本的第一部分，以便tooltip My Text here成为{{1} }}。这有点hacky，你必须小心类名冲突。

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

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

Answer 2

请查看此页面http://www.w3schools.com/css/css_tooltip.asp

＆＃13;

.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;
}

＆＃13;

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

＆＃13;

仅使用css的工具提示

2 个答案: