带有超文本标记语言内容的工具提示

Question

当你将鼠标悬停在网页的某个区域时，有很多基于JavaScript的库会显示工具提示。有些相当简单，有些允许工具提示显示用CSS样式设计的超文本标记语言内容。

但是有没有一种方法可以在不使用JavaScript的情况下显示样式化的工具提示？如果您只是使用title属性，标记不会被处理（例如foo




Answer 1

与koningdavid的类似，但可用于显示：无和块，并添加其他样式。

div.tooltip {
  position: relative;
  /*  DO NOT include below two lines, as they were added so that the text that
        is hovered over is offset from top of page*/
  top: 10em;
  left: 10em;
  /* if want hover over icon instead of text based, uncomment below */
  /*    background-image: url("../images/info_tooltip.svg");
            /!* width and height of svg *!/
            width: 16px;
            height: 16px;*/
}


/* hide tooltip */

div.tooltip span {
  display: none;
}


/* show and style tooltip */

div.tooltip:hover span {
  /* show tooltip */
  display: block;
  /* position relative to container div.tooltip */
  position: absolute;
  bottom: 1em;
  /* prettify */
  padding: 0.5em;
  color: #000000;
  background: #ebf4fb;
  border: 0.1em solid #b7ddf2;
  /* round the corners */
  border-radius: 0.5em;
  /* prevent too wide tooltip */
  max-width: 10em;
}

<div class="tooltip">
  hover_over_me
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis purus dui. Sed at orci. </span>
</div>

Answer 2

使用title属性：

html prettyprint-override"><a href="#" title="Tooltip here">Link</a>

Answer 3

我用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>