CSS 交互 - 信息提示

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

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

说明

浏览器支持

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

返回总目录

每天 30 秒系列之 CSS

  • 30Seconds

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

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

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

    168 引用 • 416 回帖

欢迎来到这里!

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

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

    doge doge

  • someone34810 1

    最后一个写错了 左下doge

  • InkDP 1 1 评论
    捐赠者

    你不是该在旅游吗

    是呀,悄悄的告诉你,这个是我提前写好的。
    Vanessa