Tooltip 文字提示

简单的文字提示气泡框。

行内tailwind/unocss用法

Top tooltip

Bottom tooltip

Left tooltip

Right tooltip

Primary tooltip

Success tooltip

Warning tooltip

Danger tooltip

移除after相关的即可不显示箭头

查看代码

<!-- 基础提示 -->
<div class="group relative">
  <button class="text-[14px]">
    Top
  </button>
  <div class="invisible absolute bottom-full left-1/2 z-[100] mb-1 -translate-x-1/2 whitespace-nowrap rounded-sm bg-gray-800 px-2 py-1 text-sm text-white opacity-0 transition-all duration-200 after:absolute after:bottom-[-5px]
    after:left-1/2 after:size-[10px] after:-translate-x-1/2 after:rotate-45 after:bg-gray-800 after:transition-[inherit] after:duration-[inherit] after:ease-[inherit] after:content-[''] group-hover:visible group-hover:opacity-100">
    Top tooltip
  </div>
</div>

<div class="group relative">
  <button class="text-[14px]">
    Bottom
  </button>
  <div class="invisible absolute left-1/2 top-full z-[100] mt-2 -translate-x-1/2 whitespace-nowrap rounded-sm bg-gray-800 px-2 py-1 text-sm text-white opacity-0 transition-all duration-200 after:absolute after:left-1/2
    after:top-[-5px] after:size-[10px] after:-translate-x-1/2 after:rotate-45 after:bg-gray-800 after:transition-[inherit] after:duration-[inherit] after:ease-[inherit] after:content-[''] group-hover:visible group-hover:opacity-100">
    Bottom tooltip
  </div>
</div>

<div class="group relative">
  <button class="text-[14px]">
    Left
  </button>
  <div class="invisible absolute right-full top-1/2 z-[100] mr-2 -translate-y-1/2 whitespace-nowrap rounded-sm bg-gray-800 px-2 py-1 text-sm text-white opacity-0 transition-all duration-200 after:absolute after:right-[-5px]
    after:top-1/2 after:size-[10px] after:-translate-y-1/2 after:rotate-45 after:bg-gray-800 after:transition-[inherit] after:duration-[inherit] after:ease-[inherit] after:content-[''] group-hover:visible group-hover:opacity-100">
    Left tooltip
  </div>
</div>

<div class="group relative">
  <button class="text-[14px]">
    Right
  </button>
  <div class="invisible absolute left-full top-1/2 z-[100] ml-2 -translate-y-1/2 whitespace-nowrap rounded-sm bg-gray-800 px-2 py-1 text-sm text-white opacity-0 transition-all duration-200 after:absolute after:left-[-5px]
    after:top-1/2 after:size-[10px] after:-translate-y-1/2 after:rotate-45 after:bg-gray-800 after:transition-[inherit] after:duration-[inherit] after:ease-[inherit] after:content-[''] group-hover:visible group-hover:opacity-100">
    Right tooltip
  </div>
</div>

<!-- 不同主题色 -->

<div class="group relative inline-block">
  <button class="text-[14px] text-primary">
    Primary
  </button>
  <div class="invisible absolute bottom-full left-1/2 z-[100] mb-1 -translate-x-1/2 whitespace-nowrap rounded-sm bg-primary px-2 py-1 text-sm text-white opacity-0 transition-all duration-200 after:absolute after:bottom-[-5px]
    after:left-1/2 after:size-[10px] after:-translate-x-1/2 after:rotate-45 after:bg-primary after:transition-[inherit] after:duration-[inherit] after:ease-[inherit] after:content-[''] group-hover:visible group-hover:opacity-100">
    Primary tooltip
  </div>
</div>

<div class="group relative inline-block">
  <button class="text-[14px] text-green-500">
    Success
  </button>
  <div class="invisible absolute bottom-full left-1/2 mb-1 -translate-x-1/2 whitespace-nowrap rounded-sm bg-green-500 px-2 py-1 text-sm text-white opacity-0 transition-all duration-200 after:absolute after:bottom-[-5px]
    after:left-1/2 after:size-[10px] after:-translate-x-1/2 after:rotate-45 after:bg-green-500 after:transition-[inherit] after:duration-[inherit] after:ease-[inherit] after:content-[''] group-hover:visible group-hover:opacity-100">
    Success tooltip
  </div>
</div>

<div class="group relative inline-block">
  <button class="text-[14px] text-yellow-500">
    Warning
  </button>
  <div class="invisible absolute bottom-full left-1/2 mb-1 -translate-x-1/2 whitespace-nowrap rounded-sm bg-yellow-500 px-2 py-1 text-sm text-white opacity-0 transition-all duration-200 after:absolute after:bottom-[-5px]
    after:left-1/2 after:size-[10px] after:-translate-x-1/2 after:rotate-45 after:bg-yellow-500 after:transition-[inherit] after:duration-[inherit] after:ease-[inherit] after:content-[''] group-hover:visible group-hover:opacity-100">
    Warning tooltip
  </div>
</div>

<div class="group relative inline-block">
  <button class="text-[14px] text-red-500">
    Danger
  </button>
  <div class="invisible absolute bottom-full left-1/2 mb-1 -translate-x-1/2 whitespace-nowrap rounded-sm bg-red-500 px-2 py-1 text-sm text-white opacity-0 transition-all duration-200 after:absolute after:bottom-[-5px]
    after:left-1/2 after:size-[10px] after:-translate-x-1/2 after:rotate-45 after:bg-red-500 after:transition-[inherit] after:duration-[inherit] after:ease-[inherit] after:content-[''] group-hover:visible group-hover:opacity-100">
    Danger tooltip
  </div>
</div>

不同方向

通过调整 absolute 定位的位置来改变提示框的方向：

• 上方提示：使用 bottom-full 和 mb-2
• 下方提示：使用 top-full 和 mt-2
• 左侧提示：使用 right-full 和 mr-2
• 右侧提示：使用 left-full 和 ml-2

css类 用法

复制下面的index.css的class定义，并粘贴到组件或全局中即可使用

Top

Top tooltip

Bottom

Bottom tooltip

Left

Left tooltip

Right

Right tooltip

Primary tooltip

Success tooltip

Warning tooltip

Danger tooltip

设置宽度/自动换行

通过tooltip-wrap并指定宽度来控制换行

不显示箭头

设置no-arrow不显示箭头

始终显示

始终显示

查看代码

html

<!-- 基础提示 -->
<div class="flex items-center gap-4">
  <!-- start -->
  <div class="tooltip">
    Top
    <div class="tooltip-popover">
      Top tooltip
    </div>
  </div>
  <!-- end -->

  <!-- start -->
  <div class="tooltip tooltip-bottom">
    Bottom
    <div class="tooltip-popover">
      Bottom tooltip
    </div>
  </div>
  <!-- end -->

  <!-- start -->
  <div class="tooltip tooltip-left">
    Left
    <div class="tooltip-popover">
      Left tooltip
    </div>
  </div>
  <!-- end -->

  <!-- start -->
  <div class="tooltip tooltip-right">
    Right
    <div class="tooltip-popover">
      Right tooltip
    </div>
  </div>
  <!-- end -->
</div>

<!-- 不同主题色 -->
<div class="space-x-4">
  <!-- start -->
  <div class="tooltip tooltip-top tooltip-primary">
    <button class="text-primary">
      Primary
    </button>
    <div class="tooltip-popover">
      Primary tooltip
    </div>
  </div>
  <!-- end -->

  <!-- start -->
  <div class="tooltip tooltip-top tooltip-success">
    <button class="text-green-500">
      Success
    </button>
    <div class="tooltip-popover">
      Success tooltip
    </div>
  </div>
  <!-- end -->

  <!-- start -->
  <div class="tooltip tooltip-top tooltip-warning">
    <button class="text-yellow-500">
      Warning
    </button>
    <div class="tooltip-popover">
      Warning tooltip
    </div>
  </div>
  <!-- end -->

  <!-- start -->
  <div class="tooltip tooltip-top tooltip-danger">
    <button class="text-red-500">
      Danger
    </button>
    <div class="tooltip-popover">
      Danger tooltip
    </div>
  </div>
  <!-- end -->
</div>

<div class="space-x-4">
  <!-- 换行 -->
  <div class="tooltip tooltip-top">
    设置宽度/自动换行
    <div class="tooltip-popover tooltip-wrap w-40 text-center">
      通过tooltip-wrap并指定宽度来控制换行
    </div>
  </div>

  <!-- 不显示箭头 -->
  <div class="tooltip tooltip-top no-arrow">
    不显示箭头
    <div class="tooltip-popover">
      设置no-arrow不显示箭头
    </div>
  </div>

  <!-- 始终显示 -->
  <div class="tooltip tooltip-right tooltip-open">
    始终显示
    <div class="tooltip-popover">
      始终显示
    </div>
  </div>
</div>

index.css

.tooltip {
  @apply relative inline-block;

  &:not([class*='tooltip-']) .tooltip-popover {
    @apply bottom-full mb-2 left-1/2 -translate-x-1/2;

    &::after {
      @apply bottom-[-5px] left-1/2 -translate-x-1/2;
    }
  }

  &:hover,
  &.tooltip-open {
    .tooltip-popover {
      @apply visible opacity-100;
    }
  }

  &:not(.no-arrow) {
    &:hover,
    &.tooltip-open {
      .tooltip-popover::after {
        display: block;
      }
    }
  }
}

.tooltip-popover {
  @apply z-[100] absolute px-2 py-1 text-sm text-white bg-gray-800 rounded-sm transition-all duration-200 invisible opacity-0 whitespace-nowrap;

  &::after {
    content: '';
    @apply absolute w-[10px] h-[10px] bg-gray-800 rotate-[45deg] transition-[inherit] duration-[inherit] ease-[inherit];
  }

  &.tooltip-wrap {
    white-space: normal;
  }
}

/* 位置变体 */
.tooltip-top {
  .tooltip-popover {
    @apply bottom-full mb-2 left-1/2 -translate-x-1/2;

    &::after {
      @apply bottom-[-5px] left-1/2 -translate-x-1/2;
    }
  }
}

.tooltip-bottom {
  .tooltip-popover {
    @apply top-full mt-2 left-1/2 -translate-x-1/2;

    &::after {
      @apply top-[-5px] left-1/2 -translate-x-1/2;
    }
  }
}

.tooltip-left {
  .tooltip-popover {
    @apply right-full mr-2 top-1/2 -translate-y-1/2;

    &::after {
      @apply right-[-5px] top-1/2 -translate-y-1/2;
    }
  }
}

.tooltip-right {
  .tooltip-popover {
    @apply left-full ml-2 top-1/2 -translate-y-1/2;

    &::after {
      @apply left-[-5px] top-1/2 -translate-y-1/2;
    }
  }
}

/* 主题变体 */
.tooltip-primary {
  .tooltip-popover {
    @apply bg-primary;

    &::after {
      @apply bg-primary;
    }
  }
}

.tooltip-success {
  .tooltip-popover {
    @apply bg-green-500;

    &::after {
      @apply bg-green-500;
    }
  }
}

.tooltip-warning {
  .tooltip-popover {
    @apply bg-yellow-500;

    &::after {
      @apply bg-yellow-500;
    }
  }
}

.tooltip-danger {
  .tooltip-popover {
    @apply bg-red-500;

    &::after {
      @apply bg-red-500;
    }
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}