前言

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

功能模块拆分

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

组件正文内容

tooltip提示组件,顾名思义是用来做属性提示的,所以其正文内容就显得尤为重要

<div class="container">
  <span class="tooltip" data-title="提示文字" data-position="top">文本上方</span>
</div>

如上是一个基本的提示组件模块,默认的提示位置位于上方,即不写 data-posiotion 提示也会从上方展现。

这里使用了 data-titledata-position 字段去描述组件的一些基本信息。

组件提示模块

即组件的提示信息展示内容模块

首先我们需要在鼠标悬停时显示选中类型所以有如下属性作用于 .tooltip本身

.tooltip {
  cursor: pointer;
  position: relative;
}

所有属性均在该元素的伪元素 beforeafter 上实现。

接下来设置其基础属性:背景色、位置、初始隐藏、过渡效果等

.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 属性,所以提示组件的主体就都可以通过 toprightbottomleft去设置了。

<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;
}

成果展示

screens

Last modification:June 15th, 2021 at 07:13 pm
如果觉得我的文章对你有用,请随意赞赏