伪元素和scss模拟tootip

页面设计的时候，有时候，我们需要在一段文字或者按钮添加一个提示组件，原先一般通过模态组件模拟一个，但是现在我们可以只通过样式就可以做到，同时为了支持扩展，我们使用scss来书写。

首先，我们需要一个箭头，支持四个方向，大小，以及颜色的扩展：

@charset "utf-8";
// 生成三角形
@mixin arrow ($direction: top, $color: black, $size: 12px) {
    $dire: (top: "bottom", bottom: "top", left: "right", right: "left");
    display: inline-block;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
    border-style: solid;
    border-width: $size;
    // 三角形的角度计算
    border-#{map-get($dire, $direction)}-width: $size * 0.64;
    border-color: transparent;
    cursor: pointer;
    border-#{map-get($dire, $direction)}-color: $color;
    border-#{$direction}: none;
}

然后我用用::before元素构造一个三角形，用::after元素构造tootip内容，通过content和attr()展现内容：

@charset "utf-8";

@import './arrow';
@mixin tooltip($pos: top, $bgcolor: #2d8cf0) {
  $dire: (top: 'bottom', bottom: 'top', left: 'right', right: 'left');
  @if not map-get($dire, $pos) {
    @error "illegalArgumentException";
  }
  & {
    position: relative;
  }
  &:hover{
    &::before,&::after{
      visibility: visible;
      opacity: 1;
    }
  }
  &::before{
    position: absolute;
    #{$pos}: 0px;
    @if $pos == 'top' or $pos == 'bottom' {
      left: 50%;
      transform: translateX(-50%);
      margin-#{$pos}: -8px;
    } @else if $pos == 'left' or $pos == 'right' {
      top: 50%;
      transform: translateY(-50%);
      margin-#{$pos}: -14px;
    }
    content: "";
    @include arrow(#{map-get($dire, $pos)}, $bgcolor);
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s;
  }
  
  &::after{
    position: absolute;
    @if $pos == 'top' or $pos == 'bottom' {
      $y: if($pos == 'top', calc(-100% - 4px), calc(100% + 4px));
      #{$pos}: 0px;
      left: 50%;
      transform: translateX(-50%) translateY($y);
    } @else if $pos == 'left' or $pos == 'right' {
      #{map-get($dire, $pos)}: 0px;
      top: 50%;
      transform: translateY(-50%);
      margin-#{map-get($dire, $pos)}: calc(100% + 8px);
    }
    max-width: 200px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    content: attr(data-tiptext);
    color: #fff;
    font-size: 12px;
    line-height: 2;
    padding: 0.2em 2em;
    border-radius: 2em;
    background: $bgcolor;
    visibility: hidden;
    opacity: 0;
    transition: opacity 1s;
  } 
}

样式使用：

<style lang="scss">
@import './tooltip';

.tooltip{
    @include tooltip(bottom); // 默认是top
}
</style>

效果展示：

传送门： github.com/luyuchen627…

tip：tootip暂时没有支持大小扩展，所以使用arrow的时候，采用默认大小