原始title属性效果模拟

发表于 更新于 分类于 ， 阅读次数：

开发过程中，我们经常会给某个元素赋予title属性，当鼠标悬浮在这个元素上时，会出现一个小提示窗口，提示title属性设置的值。这个浏览器自带的实现机制，简单又好用。但是！如果某一天用户想要自定义提示窗的样式，我们应该怎么办呢？

  • 思路
    attr()是CSS中的一个功能函数，用于获取并使用HTML元素的属性值作为CSS样式的一部分。这意味着你可以根据元素自身的属性动态地调整样式，而无需额外的JavaScript代码介入‌。

  • 实现

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    [data-title] {
      position: relative;
    }

    /* 具体控制title背景的样式 位置 字体等 */
    [data-title]::after {
      content: attr(data-title);
      background-color: rgba(80, 79, 79, 0.8);
      color: #fff;
      font-size: 13px;
      position: absolute;
      padding: 4px 10px;
      left: 20px;
      bottom: -100%;
      border-radius: 4px;
      white-space: nowrap;
      box-shadow: 0 0 4px rgba(0, 0, 0, 0.16);
      z-index: 99999;
      visibility: hidden;
      opacity: 0;
    }

    /* 样式 */
    [data-title]:hover::after { 
      opacity: 1;
      transition: all 0.1s ease 0.5s;
      visibility: visible;
    }

  • 效果
    伪代码如下:

    1
    <div class="box" data-title="提示词"></div>

效果如下:

  • 注意
    attr()函数在大多数现代浏览器中都得到了良好的支持，但在某些旧版本的浏览器中可能会有一些限制。特别是，attr()函数在非content属性中的使用目前支持有限，主要浏览器（如Chrome、Firefox、Safari）仅支持在content属性中使用‌。