adsfasfdaf如果你需要做各種懸浮提示，比如各個方向的懸浮提示，同時帶各種特效，可以參考之前分享的一篇文章：

《CSS 純CSS提示文字，問號彈出提示文字》純CSS集成小組件！

css content 的attr 實現(xiàn) 鼠標(biāo)懸浮 顯示 懸浮提示，

content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容。

<div>
    <span data-tooltip="鼠標(biāo)觸發(fā)顯示懸浮提示文字">Hover Me!!!</span>
</div>
<style>
 body{padding: 100px;}
 span{position: relative;display: inline-block}
 span:hover{cursor: pointer;}
 span:hover:before{
  content: attr(data-tooltip);
  background-color: #f35;
  color: #fff;
  padding: .8em 1em;
  position: absolute;
  left: 100%;
  top: -70%;
  margin-left: 14px;
  white-space: pre;
 }
 span:hover:after{
  content: "";
  position: absolute;
  left: 108%;
  width: 0;
  height: 0;
  border-right: 8px solid #000;
  border-top: 8px solid transpartent;
  border-bottom: 8px solid transparteng;
 }
</style>

data-  為自定義屬性，如上 自定義 提示 data-tooltip ="hello world",

配合   before ，after 使用 content 的attr 調(diào)用 自定義提示，

content: attr(data-tooltip);