Tooltip 文字提示

介绍

简单的文字提示气泡框。

何时使用

鼠标移入，点击，聚焦或者长按元素，弹出气泡式的卡片浮层，气泡浮层里可以包含文字、图片、列表、表单等内容。

代码演示

基本使用

Tooltip组件的基本使用

<script lang="ts" setup>
</script>

<template>
  <div>
    <t-tooltip content="test basic">
      <t-button>基本使用</t-button>
    </t-tooltip>
  </div>
</template>

<script lang="ts" setup>
</script>

<template>
  <div>
    <t-tooltip content="test basic">
      <t-button>基本使用</t-button>
    </t-tooltip>
  </div>
</template>

位置

Tooltip组件提供了12个方向来使用。

<script lang="ts" setup>
</script>

<template>
  <div style="display: flex;gap: 10px;flex-wrap: wrap">
    <t-tooltip content="test placement">
      <t-button>Bottom</t-button>
    </t-tooltip>
    <t-tooltip placement="bottom-end" content="test placement">
      <t-button>BottomEnd</t-button>
    </t-tooltip>
    <t-tooltip placement="bottom-start" content="test placement">
      <t-button>BottomStart</t-button>
    </t-tooltip>
    <t-tooltip placement="top" content="test placement">
      <t-button>Top</t-button>
    </t-tooltip>
    <t-tooltip placement="top-start" content="test placement">
      <t-button>TopStart</t-button>
    </t-tooltip>
    <t-tooltip placement="top-end" content="test placement">
      <t-button>TopEnd</t-button>
    </t-tooltip>
    <t-tooltip placement="left" content="test placement">
      <t-button>Left</t-button>
    </t-tooltip>
    <t-tooltip placement="left-start" content="test placement">
      <t-button>LeftStart</t-button>
    </t-tooltip>
    <t-tooltip placement="left-end" content="test placement">
      <t-button>LeftEnd</t-button>
    </t-tooltip>
    <t-tooltip placement="right" content="test placement">
      <t-button>Right</t-button>
    </t-tooltip>
    <t-tooltip placement="right-start" content="test placement">
      <t-button>RightStart</t-button>
    </t-tooltip>
    <t-tooltip placement="right-end" content="test placement">
      <t-button>RightEnd</t-button>
    </t-tooltip>
  </div>
</template>

<script lang="ts" setup>
</script>

<template>
  <div style="display: flex;gap: 10px;flex-wrap: wrap">
    <t-tooltip content="test placement">
      <t-button>Bottom</t-button>
    </t-tooltip>
    <t-tooltip placement="bottom-end" content="test placement">
      <t-button>BottomEnd</t-button>
    </t-tooltip>
    <t-tooltip placement="bottom-start" content="test placement">
      <t-button>BottomStart</t-button>
    </t-tooltip>
    <t-tooltip placement="top" content="test placement">
      <t-button>Top</t-button>
    </t-tooltip>
    <t-tooltip placement="top-start" content="test placement">
      <t-button>TopStart</t-button>
    </t-tooltip>
    <t-tooltip placement="top-end" content="test placement">
      <t-button>TopEnd</t-button>
    </t-tooltip>
    <t-tooltip placement="left" content="test placement">
      <t-button>Left</t-button>
    </t-tooltip>
    <t-tooltip placement="left-start" content="test placement">
      <t-button>LeftStart</t-button>
    </t-tooltip>
    <t-tooltip placement="left-end" content="test placement">
      <t-button>LeftEnd</t-button>
    </t-tooltip>
    <t-tooltip placement="right" content="test placement">
      <t-button>Right</t-button>
    </t-tooltip>
    <t-tooltip placement="right-start" content="test placement">
      <t-button>RightStart</t-button>
    </t-tooltip>
    <t-tooltip placement="right-end" content="test placement">
      <t-button>RightEnd</t-button>
    </t-tooltip>
  </div>
</template>

插槽使用

插槽模式使用Tooltip组件

<script lang="ts" setup>
</script>

<template>
  <div>
    <t-tooltip placement="top">
      <template #content>
        <span style="color: red">
          这是插槽中的内容
        </span>
      </template>
      <t-button>基本使用</t-button>
    </t-tooltip>
  </div>
</template>

<script lang="ts" setup>
</script>

<template>
  <div>
    <t-tooltip placement="top">
      <template #content>
        <span style="color: red">
          这是插槽中的内容
        </span>
      </template>
      <t-button>基本使用</t-button>
    </t-tooltip>
  </div>
</template>

触发方式

Tooltip支持两种触发方式，分别是hover和click。

<script lang="ts" setup>
</script>

<template>
  <div style="display: flex;gap: 10px">
    <t-tooltip trigger="hover" content="test trigger">
      <t-button>hover</t-button>
    </t-tooltip>
    <t-tooltip trigger="click" content="test trigger">
      <t-button>点击</t-button>
    </t-tooltip>
  </div>
</template>

<script lang="ts" setup>
</script>

<template>
  <div style="display: flex;gap: 10px">
    <t-tooltip trigger="hover" content="test trigger">
      <t-button>hover</t-button>
    </t-tooltip>
    <t-tooltip trigger="click" content="test trigger">
      <t-button>点击</t-button>
    </t-tooltip>
  </div>
</template>

属性

参数	说明	类型	默认值
placement	控制显示的位置	top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom	bottom
trigger	触发方式	hover click	hover
content	显示的内容，也可以通过 slot 传入 DOM	string	-