前言
前几天看到项目需求中有一组需要手动实现的提示组件,心里就萌生了写一个通用的念头,然而最终需求并没有落到我手里,不过趁着有空,还是动手简单实现了下。
功能模块拆分
- 组件正文内容
- 组件提示模块
- 组件展示位置
组件正文内容
tooltip提示组件,顾名思义是用来做属性提示的,所以其正文内容就显得尤为重要
<div class="container">
<span class="tooltip" data-title="提示文字" data-position="top">文本上方</span>
</div>
如上是一个基本的提示组件模块,默认的提示位置位于上方,即不写 data-posiotion
提示也会从上方展现。
这里使用了 data-title
、data-position
字段去描述组件的一些基本信息。
组件提示模块
即组件的提示信息展示内容模块
首先我们需要在鼠标悬停时显示选中类型所以有如下属性作用于 .tooltip
本身
.tooltip {
cursor: pointer;
position: relative;
}
所有属性均在该元素的伪元素
before
、after
上实现。
接下来设置其基础属性:背景色、位置、初始隐藏、过渡效果等
.tooltip[data-title]::before,
.tooltip[data-title]::after {
position: absolute;
z-index: 1;
color: #342c43;
left: 50%;
bottom: 100%;
transform: translate(-50%, -10px);
transition: .2s;
visibility: hidden;
opacity: 0;
}
对于 before
而言,因为承载着提示文本的主体,所以使用 attr
获取提示文本,设置字体颜色为白色,然后对提示块进行一定的样式优化,同时设置文本不换行展示
.tooltip[data-title]::before {
content: attr(data-title);
color: #fff;
border-radius: 3px;
padding: 4px 8px;
background: #342c43;
line-height: 16px;
font-size: 12px;
white-space: nowrap;
}
对于 after
而言,after
用来实现提示模块的小三角,所以这里涉及到使用css实现三角形,即宽高为0,通过 border
属性实现。
.tooltip[data-title]::after {
content: '';
width: 0;
height: 0;
margin-bottom: -12px;
border: 6px solid transparent;
border-top-color: currentColor;
}
以上基本就实现了一个提示模块,但是只有上方提示是肯定不行的。
组件展示位置
如下:使用不同的 position 位置用于设置组件展示位置。因为
tooltip
组件本身设置了position: relative
属性,所以提示组件的主体就都可以通过top
、right
、bottom
、left
去设置了。
<div class="container">
<span class="tooltip" data-title="提示文字" data-position="right">文本右侧</span>
</div>
<div class="container">
<span class="tooltip" data-title="提示文字" data-position="bottom">文本下方</span>
</div>
<div class="container">
<span class="tooltip" data-title="提示文字" data-position="left">文本左侧</span>
</div>
对于右侧文本而言
/* right */
.tooltip[data-title][data-position="right"]::before,
.tooltip[data-title][data-position="right"]::after {
top: 50%;
right: auto;
bottom: auto;
left: 100%;
transform: translate(16px, -50%);
}
.tooltip[data-title][data-position="right"]::after {
margin: 0;
margin-left: -12px;
border-color: transparent;
border-right-color: currentColor;
}
对于下方文本
/* bottom */
.tooltip[data-title][data-position="bottom"]::before,
.tooltip[data-title][data-position="bottom"]::after {
top: 100%;
bottom: auto;
left: 50%;
transform: translate(-50%, 10px);
}
.tooltip[data-title][data-position="bottom"]::after {
margin: 0;
margin-top: -12px;
border-color: transparent;
border-bottom-color: currentColor;
}
对于左侧文本
/* left */
.tooltip[data-title][data-position="left"]::before,
.tooltip[data-title][data-position="left"]::after {
top: 50%;
right: 100%;
bottom: auto;
left: auto;
transform: translate(-16px, -50%);
}
.tooltip[data-title][data-position="left"]::after {
margin: 0;
margin-right: -12px;
border-color: transparent;
border-left-color: currentColor;
}
成果展示
版权属于:ajycc20
本文链接:https://ajycc20.top/archives/32.html
所有原创文章采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可。 您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。