前言

前几天看到项目需求中有一组需要手动实现的提示组件，心里就萌生了写一个通用的念头，然而最终需求并没有落到我手里，不过趁着有空，还是动手简单实现了下。

功能模块拆分

1. 组件正文内容
2. 组件提示模块
3. 组件展示位置

组件正文内容

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 国际许可协议进行许可。 您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。