带有JavaScript的HTML内容的工具提示

小编典典

带有JavaScript的HTML内容的工具提示

css

当您将鼠标悬停在网页的特定区域时，有很多基于JavaScript的库会显示工具提示。有些相当简单，有些允许工具提示显示使用CSS样式的HTML内容。

但是有没有一种方法可以显示样式化的工具提示而不使用JavaScript？如果仅使用该title属性，则不会处理标签（例如foo<br />bar，不会产生换行符）。我正在寻找一种解决方案，该解决方案无需使用任何JavaScript即可显示样式化的HTML内容。

阅读 266

2020-05-16

共1个答案

小编典典

我使用了一个小例子 css

.hover {

  position: relative;

  top: 50px;

  left: 50px;

}



.tooltip {

  /* hide and position tooltip */

  top: -10px;

  background-color: black;

  color: white;

  border-radius: 5px;

  opacity: 0;

  position: absolute;

  -webkit-transition: opacity 0.5s;

  -moz-transition: opacity 0.5s;

  -ms-transition: opacity 0.5s;

  -o-transition: opacity 0.5s;

  transition: opacity 0.5s;

}



.hover:hover .tooltip {

  /* display tooltip on hover */

  opacity: 1;

}


<div class="hover">hover

  <div class="tooltip">asdadasd

  </div>

</div>

2020-05-16