CSS 交互 - 信息提示

2019-10-17

描述

当鼠标移上时，显示相关的信息提示。

HTML

<div class="tooltip">
    <span class="tooltipped tooltipped__n" aria-label="我是提示信息">上居中</span>
    <span class="tooltipped tooltipped__s" aria-label="我是提示信息">下居中</span>
    <span class="tooltipped tooltipped__e" aria-label="我是提示信息">右居中</span>
    <span class="tooltipped tooltipped__w" aria-label="我是提示信息">左居中</span>
    <span class="tooltipped tooltipped__nw" aria-label="我是提示信息">左上</span>
    <span class="tooltipped tooltipped__ne" aria-label="我是提示信息">右上</span>
    <span class="tooltipped tooltipped__se" aria-label="我是提示信息">右下</span>
    <span class="tooltipped tooltipped__sw" aria-label="我是提示信息">右下</span>
</div>

SCSS

$tooltipColor: #fff !default;
$tooltipBg: rgba(0, 0, 0, 0.8) !default;

@keyframes tooltip-appear {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.tooltip {
  display: flex;
  span {
    margin: 30px 10px;
  }
}

.tooltipped {
  position: relative;
  cursor: pointer;
  &::after {
    position: absolute;
    z-index: 1000000;
    display: none;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: normal;
    -webkit-font-smoothing: subpixel-antialiased;
    color: $tooltipColor;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: break-word;
    white-space: pre;
    pointer-events: none;
    content: attr(aria-label);
    background: $tooltipBg;
    border-radius: 3px;
    line-height: 16px;
    opacity: 0
  }

  &::before {
    position: absolute;
    z-index: 1000001;
    display: none;
    width: 0;
    height: 0;
    color: $tooltipBg;
    pointer-events: none;
    content: "";
    border: 5px solid transparent;
    opacity: 0
  }

  &--hover::before,
  &--hover::after,
  &:hover::before,
  &:hover::after,
  &:active::before,
  &:active::after,
  &:focus::before,
  &:focus::after {
    display: inline-block;
    text-decoration: none;
    animation-name: tooltip-appear;
    animation-duration: 0.15s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
  }

  &__s::after,
  &__se::after,
  &__sw::after {
    top: 100%;
    right: 50%;
    margin-top: 5px
  }

  &__s::before,
  &__se::before,
  &__sw::before {
    top: auto;
    right: 50%;
    bottom: -5px;
    margin-right: -5px;
    border-bottom-color: $tooltipBg
  }

  &__se::after {
    right: auto;
    left: 50%;
    margin-left: -15px
  }

  &__sw::after {
    margin-right: -15px
  }

  &__n::after,
  &__ne::after,
  &__nw::after {
    right: 50%;
    bottom: 100%;
    margin-bottom: 5px
  }

  &__n::before,
  &__ne::before,
  &__nw::before {
    top: -5px;
    right: 50%;
    bottom: auto;
    margin-right: -5px;
    border-top-color: $tooltipBg
  }

  &__ne::after {
    right: auto;
    left: 50%;
    margin-left: -15px
  }

  &__nw::after {
    margin-right: -15px
  }

  &__s::after,
  &__n::after {
    transform: translateX(50%)
  }

  &__w::after {
    right: 100%;
    bottom: 50%;
    margin-right: 5px;
    transform: translateY(50%);
  }

  &__w::before {
    top: 50%;
    bottom: 50%;
    left: -5px;
    margin-top: -5px;
    border-left-color: $tooltipBg;
  }

  &__e::after {
    bottom: 50%;
    left: 100%;
    margin-left: 5px;
    transform: translateY(50%)
  }

  &__e::before {
    top: 50%;
    right: -5px;
    bottom: 50%;
    margin-top: -5px;
    border-right-color: $tooltipBg
  }
}

Demo

说明

• position: relative 相对于伪元素而言，为其在父元素上重新建立一个笛卡尔坐标系
• position: absolute 使伪元素脱离文档流的布局，使其能够相对于他的父亲进行绝对定位
• ::before 定义一个伪元素，用于三角形箭头的显示
• ::after 定义一个伪元素，显示提示内容
• content: attr(aria-label) 显示元素 aria-label 的属性值
• transform 调整提示内容的位置，以达到最终需要的效果
• @keyframes 通过在动画序列中定义关键帧的样式来控制 CSS 动画序列中的中间步骤
• animation 使用通过 @keyframes 定义的动画及设定该动画的时间、效果等
• pointer-events: none 指定该元素永远不会成为鼠标事件的 target

浏览器支持

支持率：92.87%
支持情况：https://caniuse.com/#search=::after

返回总目录

每天 30 秒系列之 CSS