css content属性实现tooltip紧急文字提示

terry 2年前 (2023-09-27) 阅读数 64 #数据结构与算法

分析执行过程

将鼠标移动到节点

检测节点是否存在并启用实现tooltip实现的识别（类名、属性等... 非常明显，标注位置是通过 javascript

添加的，让我们设置一些期望

no javascript 干净css 实施；
无需添加新元素（使用po、before伪元素）
无需匹配类名，直接使用属性选择器[attr]
支持默认样式（Ko主题）标签和位置未定义）
必需（直接在标签中指定，然后留给css来匹配）
实现主题和标注位置
使用 sass 预处理器开发

html 定义指令规范

强制声明：

<button tooltip='我是内容鸭' effect='light' placement='top-left'>上左</button>
复制代码

tooltip — 标注显示的内容；
效果 — 气泡主题（深色/浅色），默认深色；
position — 标注相对于父元素的位置（top/top-left/top-right/right/right-top/right-botto m ...），默认top；

先写一些按钮

样式参考element-ui

<div class="container">
  <div class="top">
    <button tooltip="上边" placement="top-left" effect="light">上左</button>
    <button tooltip="上左上左" placement="top">上边</button>
    <button tooltip="上右" placement="top-right">上右</button>
  </div>
  <div class="left">
    <button tooltip="左上左上左上左上左上左上左上左上左上左上" placement="left-top">左上</button>
    <button tooltip="左边" placement="left" effect="light">左边</button>
    <button tooltip="左右" placement="left-bottom">左下</button>
  </div>
  <div class="right">
    <button tooltip="右上右上右上右上右上右上右上右上" placement="right-top">右上</button>
    <button tooltip="右边" placement="right" effect="light">右边</button>
    <button tooltip="右下" placement="right-bottom">右下</button>
  </div>
  <div class="bottom">
    <button tooltip="下左下左" placement="bottom-left">下左</button>
    <button tooltip="下边" placement="bottom" effect="light">下边</button>
    <button tooltip="下右" placement="bottom-right">下右</button>
  </div>
</div>
复制代码

核心CSS逻辑的实现

hover跟踪鼠标进出移动，[提示] 比赛是该属性的标记，对于是一个气泡，before是一个三角形：

/* 匹配有tooltip属性的元素 */
[tooltip] {
  position: relative;

  /* 气泡默认样式 */
  &::after {
    display: none;
    content: attr(tooltip);
  }

  /* 三角形默认样式 */
  &::before {
    display: none;
    content: '';
  }

  /* 鼠标移入该元素，显示气泡、三角形 */
  &:hover {

    &::after {
      display: block;
    }

    &::before {
      display: block;
    }
  }
}
复制代码

现在鼠标移动时效果就会生效

按照顺序为了更容易地看到效果，您可以尝试气泡和三角形。默认是方块

/* 气泡默认样式 */
&::after {
  display: block;
  content: attr(tooltip);
}

/* 三角形默认样式 */
&::before {
  display: block;
  content: '';
}
复制代码

当前效果如下：

设置气泡和三角形的默认样式

主屏幕当然设置为绝对定位：

/* 气泡默认样式 */
&::after {
  display: block;
  content: attr(tooltip);
  position: absolute;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 8px 15px;
  max-width: 200px;
  border-radius: 4px;
  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);
  z-index: 100;
  @extend .tooltip-theme-dark; /* 继承默认主题（黑底白字） */
 }

/* 三角形默认样式 */
&::before {
  display: block;
  content: '';
  position: absolute;
  border: 5px solid transparent;
  z-index: 100;
  @extend .triangle-theme-dark; /* 继承默认主题（黑底） */
}
复制代码

当前效果如下：

调整气泡和三角形的主题颜色

定义两个主题：

$white: #fff;
$black: #313131;

/* 气泡主题 */
.tooltip-theme-dark {
  color: $white;
  background-color: $black;
}

.tooltip-theme-light {
  color: $black;
  background-color: $white;
  border: 1px solid $black;
}

/* 三角形主题 */
.triangle-theme-dark {
  border-top-color: $black;
}

.triangle-theme-light {
  border-top-color: $black; /* 暂时跟dark一样 */
}
复制代码

调整气泡和三角形的位置（仅一种方式示例）

/* 气泡位置 */

/*----上----*/
.tooltip-placement-top {
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip-placement-top-right {
  bottom: calc(100% + 10px);
  left: 100%;
  transform: translate(-100%, 0)
}

.tooltip-placement-top-left {
  bottom: calc(100% + 10px);
  left: 0;
  transform: translate(0, 0)
}

/* 三角形位置 */

/*----上----*/
.triangle-placement-top {
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%, 0);
}

.triangle-placement-top-left {
  bottom: calc(100% + 5px);
  left: 10px;
}

.triangle-placement-top-right {
  bottom: calc(100% + 5px);
  right: 10px;
}
复制代码

捕捉位置和主题

这也是基本代码，使用属性选择器来匹配标签值，然后设置不同的样式

来匹配gas气泡和三角形主题：

&[effect="light"] {
  &::after {
    @extend .tooltip-theme-light;
  }

  &::before {
    @extend .triangle-theme-light;
  }
}
复制代码

气泡和三角形位置匹配，12 个位置：

@each $placement in top,top-right,top-left,
right,right-top,right-bottom,
bottom,bottom-right,bottom-left,
left,left-top,left-bottom {
  &[placement="#{$placement}"] {
    &::after {
      @extend .tooltip-placement-#{$placement};
    }

    &::before {
      @extend .triangle-placement-#{$placement};
    }
  }
}
复制代码

不存在标签。当placement属性/为空时，默认继承顶部位置：

&:not([placement]),
&[placement=""] {
  &::after {
    @extend .tooltip-placement-top;
  }

  &::before {
    @extend .triangle-placement-top;
  }
}
复制代码

目前效果如下：

我们来设置Extend text，默认添加display:none气泡和三角形样式看：

添加动画

分为上、下、左、右四个方向，四个动画：


@keyframes anime-top {
  from {
    opacity: .5;
    bottom: 150%;
  }
}

@keyframes anime-bottom {
  from {
    opacity: .5;
    top: 150%;
  }
}

@keyframes anime-left {
  from {
    opacity: .5;
    right: 150%;
  }
}

@keyframes anime-right {
  from {
    opacity: .5;
    left: 150%;
  }
}
复制代码

匹配气泡的位置，用于确定执行哪个动画。使用[attr^=]进行选择。比如左上角和右上角也可以匹配：

/* 设置动画 */
@each $placement in top,
 right,
bottom,
left {
  &[placement^="#{$placement}"] {

    &::after,
    &::before {
      animation: anime-#{$placement} 300ms ease-out forwards;
    }
  }
}
复制代码

最终效果如下：