CSS 交互 - 信息提示

本贴最后更新于 1625 天前,其中的信息可能已经沧海桑田

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

  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 383 回帖 • 1 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    180 引用 • 446 回帖 • 4 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • someone34810

    doge doge

  • 其他回帖
  • someone34810 1

    最后一个写错了 左下doge

  • InkDP 1 1 评论

    你不是该在旅游吗

    是呀,悄悄的告诉你,这个是我提前写好的。
    Vanessa
Vanessa
我们终此一生,就是要摆脱他人的期待,找到真正的自己。 昆明