纯css实现tooltip⽂字浮框
在平时开发中会遇到展⽰不全的信息或者⼀个图标，⿏标移⼊后展⽰出更详细的内容浮框需求，现在使⽤的组件库都有这个功能组件，直接引⼊使⽤即可。但是有时候项⽬没有引⼊组件库，或者⽆法使⽤组件的时候，⾃⼰可以使⽤纯css来实现⾃⼰的tooltip浮框。
⼀、全部使⽤伪类实现
思路
1、 在⽂字显⽰的标签内增加浮框的内容
2、 使⽤伪类：：before设置浮框
3、 使⽤伪类：：after设置三⾓形（实现三⾓形设置元素宽⾼为0，三个边框颜⾊透明）
4、 使⽤定位设置浮框和三⾓形距离⽂字标签的距离
5、 给元素设置不同属性，使⽤属性选择器设置浮框出现在⽂字元素的⽅向位置
6、 使⽤content: attr(元素属性名); 获取属性值
代码实现
⾸先是元素代码
<div id="container" content="后⽔⽔⽔⽔">
<div class="my-show-tooltip" content="提⽰出提提⽰\A出现UK复\r\n合式开发哈萨克的节哀顺变道提⽰出现UK复合式开发哈萨克的节哀顺变道提⽰出现UK复合式开发哈萨克的节哀顺变道⽰出现UK复合式开发哈萨克的节哀顺变道现在左侧" position="top">我是在上⾯的</div>
<br>
<div class="my-show-tooltip" content="`提⽰出现UK复合式开发哈萨克的节哀顺\A变道\r\n
济阿⽃富⼠康后⽅可是否开\r\n始放好看富⼠康回复肯定
是⼤富豪收款⽅在上⽅`" position="top">
我是在上⾯的</div>
<br>
<div class="my-show-tooltip" content="我是在右⾯的我是在右⾯的\A我是在右⾯的我是在右⾯的我是在右⾯的" position="right">我是在右⾯的</div>
<br>
<div class="my-show-tooltip" content="我是在下⾯的我是在下⾯的我是在下⾯的我是在下⾯的" position="bottom">我是在下⾯的</div>
<br>
<div class="my-show-tooltip" content="我是在左⾯的我是在左⾯的我是在左⾯的" position="left">我是在左⾯的</div>
</div>
接下来是样式代码
//全部使⽤伪类实现toolip
.my-show-tooltip {
display: inline-block;
position: relative;
}
.my-show-tooltip:hover::before {
display: block;
}
.my-show-tooltip::before {
display: none;
content: attr(content);
white-space: pre;
text-align: left;
position: absolute;
color: #fff;
padding: 8px 16px;
border-radius: 2px;
z-index: 100;
background-color: #000;
}
.my-show-tooltip[position="top"]::before {
bottom: calc(100% + 10px);
left: 50%;
left: 50%;
transform: translate(-50%);
box-shadow: 0 5px 10px -2px rgba(0, 0, 0, .4); }
.my-show-tooltip[position="right"]::before {
left: calc(100% + 10px);
top: 50%;
transform: translate(0, -50%);
box-shadow: -5px 0 10px -2px rgba(0, 0, 0, .4); }
.my-show-tooltip[position="bottom"]::before {
top: calc(100% + 10px);
left: 50%;
transform: translate(-50%);
box-shadow: 0 -5px 10px -2px rgba(0, 0, 0, .4); }
.my-show-tooltip[position="left"]::before {
right: calc(100% + 10px);
top: 50%;
transform: translate(0, -50%);
box-shadow: 5px 0 10px -2px rgba(0, 0, 0, .4); }
.my-show-tooltip::after {
display: none;
content: '';
position: absolute;
z-index: 100;
width: 0;
height: 0;
}
.my-show-tooltip:hover::after {
display: block;
}
.my-show-tooltip[position="top"]::after {
bottom: calc(100% + 5px);
left: 50%;
transform: translate(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}
.my-show-tooltip[position="right"]::after {
left: calc(100% + 5px);
top: 50%;
transform: translate(0, -50%);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000;
}
.
my-show-tooltip[position="bottom"]::after {
top: calc(100% + 5px);
left: 50%;
transform: translate(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000;
}
.my-show-tooltip[position="left"]::after {
.my-show-tooltip[position="left"]::after {
right: calc(100% + 5px);
top: 50%;
transform: translate(0, -50%);
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000;
}
最终效果
上述⽅法在使⽤的过程中对于简单的⽂字提⽰完全可以实现，但是遇到提⽰内容⽐较复杂的时候就很乏⼒，⽐如换⾏和设置各种不同的样式时，另外上述⽅式可能有些浏览器不兼容。所以我们采⽤了第⼆种⽅式来实现。
⼆、新添加元素标签实现
思路
1、 在⽂字元素内添加⼀个浮框的标签
2、 浮框使⽤定位设置展⽰在⽂字元素的⽅向和位置
3、 使⽤浮框标签伪类设置三⾓形（实现三⾓形设置元素宽⾼为0，三个边框颜⾊透明）
4、 给元素设置不同属性，使⽤属性选择器设置浮框出现在⽂字元素的⽅向位置参考第⼀种⽅法（下⾯⽅法只展⽰了在上⽅的浮框，所以就没设置标签属性）好看的css代码
⾸先是元素代码
<div class="textWrap" >
<div class="show-text">
<div class="my-toolip">我觉的我是想展⽰的东西我觉的我是想展⽰的东西我觉的我是<br>想展⽰的东西我觉的我是想展⽰的东西我觉的我是想展⽰的东西</div>
慢慢滑过
</div>
</div>
接下来是样式代码
// 使⽤css添加元素实现
.show-text {
position: relative;
}
.show-text:hover .my-toolip {
display: block;
}
.my-toolip {
display: none;
white-space: pre;
text-align: left;
position: absolute;
color: #fff;
font-family: PingFangSC;
padding: 8px 16px;
border-radius: 2px;
z-index: 100;
background-color: #000;
bottom: 100%;
left: 50%;
transform: translate(-50%);
margin-bottom: 10px;
}
.my-toolip::after {
display: none;
content: '';
position: absolute;
z-index: 100;
bottom: -5px;
left: 50%;
width: 0;
height: 0;
transform: translate(-50%);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000;
}
.show-text:hover .my-toolip::after {
display: block;
}
最终效果
上⾯因为只⽤到了在上⽅的效果所以其他⽅向的就没有写，其他⽅向和上⽅的实现⼀样，只需要修改定位的位置即可，这种⽅式可以轻松实现更复杂的浮框内容，扩展性更好。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。