阅读数:

css实现带箭头的tooltip

0

说明

前端童鞋用惯了像jquery-ui,bootstrap-ui,react-ui等框架,肯定对tooltip不陌生,一个带小箭头的
提示,用来告知用户error warning和success的信息,抛开现成,我们能不能自己搞定,答案是肯定的

实现

分析

布局肯定是一个大的容器里,左边一个小尖头,右边一个文本比如span/div,形如

1
2
3
4
<div class="container">
<div class="arrow">箭头</div>
<span class="title">文本</span>
<div>

css

说明:小箭头可以有多种实现,比如做一个png,或者巧妙利用border 用css来实现,这里我选择第二种。
将宽高设为0,边框10px,这样画出来应该是10*10的小方型,但我们要的是小三角,简单我们将right可见,其他
三边设置为透明即可。

arrow1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
.container{
color: #FFF;
font-size: 16px;
line-height: 36px;
display: inline-block;
height: 36px;
width: 120px;
text-align: center;
border-radius: 5px;
background-color: #0073bd;
margin-top: 18px;
padding: 0px 5px 0px 5px;
overflow: hidden; // 超长打点
text-overflow: ellipsis; // 超长打点
white-space: nowrap; // 超长打点
}

.arrow{
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-right: 10px solid #2d09a7;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right-color: #0073bd;
position: absolute;
margin-left: -12px; // 让箭头伸出去
margin-top: 8px; // 箭头垂直居中 (container height 36-bordertop 10 -borderbottom 10)/2
}

arrow2

咦,箭头位置不对啊,因为虽然arrow border-left我们不可见了,但是占位还在,我们去掉看看

1
2
3
4
5
6
7
8
9
10
11
.arrow{
width: 0px;
height: 0px;
border-top: 10px solid transparent;
border-right: 10px solid #2d09a7;
border-bottom: 10px solid transparent;
border-right-color: #0073bd;
position: absolute;
margin-left: -12px; // 让箭头伸出去
margin-top: 8px; // 箭头垂直居中 (container height 36-bordertop 10 -borderbottom 10)/2
}

完美

arrow3

最后

我们完整的实现了可打点的tooltip


^-^欢迎回复交流^-^


0
赏点咖啡钱^.^