位置：广州松河 > 技术支持 > content: attr(data-content);鼠标触发显示悬浮提示_CSS学习

content: attr(data-content);鼠标触发显示悬浮提示_CSS学习

来源：网络整理时间：2023/3/4 0:56:55 共 3607 浏览

adsfasfdaf如果你需要做各种悬浮提示，比如各个方向的悬浮提示，同时带各种特效，可以参考之前分享的一篇文章：

《CSS 纯CSS提示文字，问号弹出提示文字》纯CSS集成小组件！

css content 的attr 实现鼠标悬浮显示悬浮提示，

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

<div>
    <span data-tooltip="鼠标触发显示悬浮提示文字">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 调用自定义提示，

content: attr(data-tooltip);

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS -webkit-line-clamp限制文本行数_CSS学习 | ·下一条：CSS3 box-sizing: content-box|border-box|inherit;属性使用方法_CSS学习