Tooltip 提示组件

常用的提示组件。

基础用法

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

使用 content 属性来决定 hover 时的提示信息。 由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。 如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

Top Left prompts info

Top Center prompts info

Top Right prompts info

Left Top prompts info

Right Top prompts info

Left Center prompts info

Right Center prompts info

Left Bottom prompts info

Right Bottom prompts info

Bottom Left prompts info

Bottom Center prompts info

Bottom Right prompts info

<template>
  <div class="tooltip-base-box">
    <div class="center">
      <my-tooltip
        effect="dark"
        content="Top Left prompts info"
        placement="top-start"
        trigger="click"
      >
        <my-button>top-start</my-button>
      </my-tooltip>
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Top Center prompts info"
        placement="top"
      >
        <my-button>top</my-button>
      </my-tooltip>
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Top Right prompts info"
        placement="top-end"
        trigger="click"
      >
        <my-button>top-end</my-button>
      </my-tooltip>
    </div>

    <div class="row">
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Left Top prompts info"
        placement="left-start"
      >
        <my-button>left-start</my-button>
      </my-tooltip>
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Right Top prompts info"
        placement="right-start"
        trigger="click"
      >
        <my-button>right-start</my-button>
      </my-tooltip>
    </div>

    <div class="row">
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Left Center prompts info"
        placement="left"
      >
        <my-button class="mt-3 mb-3">left</my-button>
      </my-tooltip>
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Right Center prompts info"
        placement="right"
      >
        <my-button>right</my-button>
      </my-tooltip>
    </div>

    <div class="row">
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Left Bottom prompts info"
        placement="left-end"
      >
        <my-button>left-end</my-button>
      </my-tooltip>
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Right Bottom prompts info"
        placement="right-end"
      >
        <my-button>right-end</my-button>
      </my-tooltip>
    </div>

    <div class="center">
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <my-button>bottom-start</my-button>
      </my-tooltip>
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <my-button>bottom</my-button>
      </my-tooltip>
      <my-tooltip
        class="box-item"
        effect="dark"
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <my-button>bottom-end</my-button>
      </my-tooltip>
    </div>
  </div>
</template>

<script setup></script>

<style scoped>
  .tooltip-base-box {
    width: 600px;
    margin: auto;
  }

  .tooltip-base-box .row {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }

  .tooltip-base-box .center {
    display: flex;
    justify-content: center;
    gap: 20px;
  }
</style>

主题

Tooltip 组件内置了两个主题：dark和light。

通过设置 effect 来修改主题，默认值为 dark.

Top center

Bottom center

Bottom center

<template>
  <div class="right">
    <my-tooltip
      content="Top center"
      placement="top"
    >
      <my-button>Dark</my-button>
    </my-tooltip>
    <my-tooltip
      content="Bottom center"
      placement="bottom"
      effect="light"
    >
      <my-button>Light</my-button>
    </my-tooltip>
    <my-tooltip
      content="Bottom center"
      effect="customized"
    >
      <my-button>Customized theme</my-button>
    </my-tooltip>
  </div>
</template>

<script setup></script>

<style scoped>
  .right {
    display: flex;
    gap: 20px;
  }
</style>

更多内容的文字提示

展示多行文本或者是设置文本内容的格式

用具名 slot content，替代tooltip中的content属性。

multiple lines
second line

<template>
  <my-tooltip placement="top">
    <template #content> multiple lines<br />second line </template>
    <my-button>Top center</my-button>
  </my-tooltip>
</template>

<script setup></script>

虚拟触发

有时候我们想把 tooltip 的触发元素放在别的地方，而不需要写在一起，这时候就可以使用虚拟触发。

Bottom center

<template>
  <my-tooltip
    v-model:visible="visible"
    content="Bottom center"
    placement="bottom"
    effect="light"
    trigger="click"
    virtual-triggering
    :virtual-ref="triggerRef"
  >
    <my-button>tooltip</my-button>
  </my-tooltip>

  <span class="left">
    <my-button @click="visible = !visible">显示/隐藏</my-button>
  </span>
</template>

<script setup>
  import { ref } from 'vue'

  const visible = ref(false)
</script>

<style lang="scss" scoped>
  .left {
    margin-left: 20px;
  }
</style>

受控模式

Tooltip 可以通过父组件使用 :visible 来控制它的显示与关闭。

Content

<template>
  <my-tooltip :visible="visible">
    <template #content>
      <span>Content</span>
    </template>
    <my-button
      @mouseenter="visible = true"
      @mousmyeave="visible = false"
    >
      Hover me
    </my-button>
  </my-tooltip>
</template>

<script setup>
  import { ref } from 'vue'

  const visible = ref(false)
</script>

API

Attributes

名称	说明	类型	默认值
visible / v-model:visible	Tooltip 组件可见性	boolean	—
content	提示内容文本	string	—
placement	弹出层位置（参考 Popper.js）	ComputedPlacement	bottom
popperOption	Popper.js 的额外配置	Partial<Options>	{}
trigger	触发方式（hover/click）	hover | click	hover
effect	主题风格（dark/light）	dark | light	dark
showAfter	显示延迟（毫秒）	number	0
hideAfter	隐藏延迟（毫秒）	number	200
transition	动画名称	string	tooltip
virtualTriggering	是否使用虚拟触发元素	boolean	false

Slots

插槽名	说明
default	Tooltip 触发 & 引用的元素
content	自定义内容

Exposes

名称	详情	类型
show	显示 Tooltip	() => void
hide	隐藏 Tooltip	() => void
popperRef	获取 Popper 实例	Ref<HTMLElement | undefined>
triggerRef	获取触发元素实例	Ref<HTMLElement | undefined>