《CSS 纯CSS提示文字,问号弹出提示文字》纯CSS集成小组件!
csscontent的attr实现鼠标悬浮显示悬浮提示,
content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。
<div><spandata-tooltip="鼠标触发显示悬浮提示文字">HoverMe!!!</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:.8em1em;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:8pxsolid#000;border-top:8pxsolidtranspartent;border-bottom:8pxsolidtransparteng;}</style>
data-为自定义属性,如上自定义提示 data-tooltip ="hello world",
配合 before ,after使用 content的attr调用自定义提示,
content: attr(data-tooltip);