純 `css` 打造一個小提示 `tooltip`

前

無心間在尋找資料時候，發現一個不錯的小提示，查詢了下源碼，居然是純手工 css 編寫，文章底部參考連接。

效果

使用的特性

• css2 中的 attr 函數，因此如今（2019/11/26）主流瀏覽器基本都兼容

• 爲了更加精準定位使用了 css3 中的 calc 函數，若是被要求的瀏覽器不支持，那麼降級處理的最好方式就是手動計算定位

Code

// 背景色
$tooltip-fill-color:     rgba(#000, .8) !default;
// 垂直方向的內邊距
$tooltip-y-padding:      3px !default;
// 水平方向的內邊距（採用 1:2 方式拉伸）
$tooltip-x-padding:      2 * $tooltip-y-padding !default;
// 小箭頭的寬度
$tooltip-arrow-width:    5px !default;
// 字體的準線高度（爲了垂直居中）
$tooltip-line-height:    1.5 !default;

// 指定的包含 data-title 的元素
*[data-title] {
  overflow: hidden;

  &:before,
  &:after {
    position: absolute;
    z-index: 10;
    opacity: 0;
    // 小偏移可去除（採用了 css3，低版本瀏覽器可移除）
    transform: translate3d(-50%, 0, 0);
    transition: 300ms ease;
  }

  &:before {
    // 獲取 data-title 的值
    content: attr(data-title);
    // 開始計算上浮偏移量，相加以後採用負數向上偏移）
    // 首先是字體的高度 1em * $tooltip-line-height
    // 而後是垂直方向上的內邊距，注意分上下，因此是 $tooltip-y-padding * 2
    // 最後是小箭頭的寬度（其實也是高度）
    top: calc(#{-1em * $tooltip-line-height} - #{$tooltip-y-padding * 2} - #{$tooltip-arrow-width});
    left: 50%;
    padding: $tooltip-y-padding $tooltip-x-padding;
    line-height: $tooltip-line-height;
    border-radius: 4px;
    background-color: $tooltip-fill-color;
    color: #fff;
    // 字體不給換行，那種字多的提示可能須要換個表現方式
    white-space: nowrap;
    // 重點：咱們使用內容填充，由於咱們不知道字體大小
    box-sizing: content-box;
  }
  
  // 小箭頭
  &:after {
    content: "\20";
    top: -1 * $tooltip-arrow-width;
    left: 50%;
    border: $tooltip-arrow-width solid transparent;
    border-top-color: $tooltip-fill-color;
  }

  &:hover {
    overflow: visible;

    &:before,
    &:after {
      opacity: 1;
      // 便宜，低版本可移除
      transform: translate3d(-50%, -3px, 0);
    }
  }
}

最終編譯出來結果：

*[data-title] {
  overflow: hidden;
}
*[data-title]:before, *[data-title]:after {
  position: absolute;
  z-index: 10;
  opacity: 0;
  transform: translate3d(-50%, 0, 0);
  transition: 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
*[data-title]:before {
  content: attr(data-title);
  top: calc(-1.5em - 6px - 5px);
  left: 50%;
  padding: 3px 6px;
  line-height: 1.5;
  border-radius: 4px;
  background-color: rgba(73, 80, 87, 0.8);
  color: #fff;
  white-space: nowrap;
  box-sizing: content-box;
}
*[data-title]:after {
  content: "\20";
  top: -5px;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: rgba(73, 80, 87, 0.8);
}
*[data-title]:hover {
  overflow: visible;
}
*[data-title]:hover:before, *[data-title]:hover:after {
  opacity: 1;
  transform: translate3d(-50%, -3px, 0);
}

結

這就是所有的實現代碼，僅僅實現基本功能，若是是要更加健壯，那麼還須要考慮更多狀況。

好比我考慮的一點就是我僅僅須要在 pc 上展現，因此能夠作一個小自適應，即便用下面的代碼包裹住：

@media screen and (min-width: 992px) {
  /* 上面的編譯後 css 代碼 */
}

需求太多，自求多福😂

附