Tooltip | Z-Element

常用于展示鼠标 hover 时的提示信息。

基础用法

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

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

<script lang="ts" setup>
// import { ref } from 'vue'
</script>
<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <ZgTooltip class="box-item" content="Top Left prompts info" placement="top-start">
        <ZgButton>top-start</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Top Center prompts info" placement="top">
        <ZgButton>top</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Top Right prompts info" placement="top-end">
        <ZgButton>top-end</ZgButton>
      </ZgTooltip>
    </div>
    <div class="row">
      <ZgTooltip class="box-item" effect="dark" content="Left Top prompts info" placement="left-start">
        <ZgButton>left-start</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Right Top prompts info" placement="right-start">
        <ZgButton>right-start</ZgButton>
      </ZgTooltip>
    </div>
    <div class="row">
      <ZgTooltip class="box-item" effect="dark" content="Left Center prompts info" placement="left">
        <ZgButton class="mt-3 mb-3">left</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Right Center prompts info" placement="right">
        <ZgButton>right</ZgButton>
      </ZgTooltip>
    </div>
    <div class="row">
      <ZgTooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
        <ZgButton>left-end</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end">
        <ZgButton>right-end</ZgButton>
      </ZgTooltip>
    </div>
    <div class="row center">
      <ZgTooltip class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
        <ZgButton>bottom-start</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom">
        <ZgButton>bottom</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
        <ZgButton>bottom-end</ZgButton>
      </ZgTooltip>
    </div>
  </div>
</template>

<style>
.tooltip-base-box {
  padding: 20px 0 0 100px;
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  margin-top: 10px;
  margin-right: 10px;
}
</style>

<script lang="ts" setup>
// import { ref } from 'vue'
</script>
<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <ZgTooltip class="box-item" content="Top Left prompts info" placement="top-start">
        <ZgButton>top-start</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Top Center prompts info" placement="top">
        <ZgButton>top</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Top Right prompts info" placement="top-end">
        <ZgButton>top-end</ZgButton>
      </ZgTooltip>
    </div>
    <div class="row">
      <ZgTooltip class="box-item" effect="dark" content="Left Top prompts info" placement="left-start">
        <ZgButton>left-start</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Right Top prompts info" placement="right-start">
        <ZgButton>right-start</ZgButton>
      </ZgTooltip>
    </div>
    <div class="row">
      <ZgTooltip class="box-item" effect="dark" content="Left Center prompts info" placement="left">
        <ZgButton class="mt-3 mb-3">left</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Right Center prompts info" placement="right">
        <ZgButton>right</ZgButton>
      </ZgTooltip>
    </div>
    <div class="row">
      <ZgTooltip class="box-item" effect="dark" content="Left Bottom prompts info" placement="left-end">
        <ZgButton>left-end</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Right Bottom prompts info" placement="right-end">
        <ZgButton>right-end</ZgButton>
      </ZgTooltip>
    </div>
    <div class="row center">
      <ZgTooltip class="box-item" effect="dark" content="Bottom Left prompts info" placement="bottom-start">
        <ZgButton>bottom-start</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Bottom Center prompts info" placement="bottom">
        <ZgButton>bottom</ZgButton>
      </ZgTooltip>
      <ZgTooltip class="box-item" effect="dark" content="Bottom Right prompts info" placement="bottom-end">
        <ZgButton>bottom-end</ZgButton>
      </ZgTooltip>
    </div>
  </div>
</template>

<style>
.tooltip-base-box {
  padding: 20px 0 0 100px;
  width: 600px;
}
.tooltip-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-base-box .center {
  justify-content: center;
}
.tooltip-base-box .box-item {
  margin-top: 10px;
  margin-right: 10px;
}
</style>

手动控制模式

manual 打开手动模式;visible控制隐藏显示

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(true)
</script>
<template>
  <ZgTooltip placement="top" :visible="visible" manual>
    <template #content> multiple lines<br />second line </template>
    <ZgButton @click="visible = !visible">Top center</ZgButton>
  </ZgTooltip>
</template>

<style></style>

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(true)
</script>
<template>
  <ZgTooltip placement="top" :visible="visible" manual>
    <template #content> multiple lines<br />second line </template>
    <ZgButton @click="visible = !visible">Top center</ZgButton>
  </ZgTooltip>
</template>

<style></style>

延时打开关闭

showAfter hideAfter

<script lang="ts" setup>
// import { ref } from 'vue'
</script>
<template>
  <ZgTooltip placement="top" :showAfter="1000" :hideAfter="1000">
    <template #content> multiple lines<br />second line </template>
    <ZgButton>Top center</ZgButton>
  </ZgTooltip>
</template>

<style></style>

<script lang="ts" setup>
// import { ref } from 'vue'
</script>
<template>
  <ZgTooltip placement="top" :showAfter="1000" :hideAfter="1000">
    <template #content> multiple lines<br />second line </template>
    <ZgButton>Top center</ZgButton>
  </ZgTooltip>
</template>

<style></style>

追加到 append-to 的位置

appendTo=".testClass" appendTo="#testId" teleported

class="testClass"

id="testId"

<script lang="ts" setup>
// import { ref } from 'vue'
</script>
<template>
  <div class="testClass">class="testClass"</div>
  <div id="testId">id="testId"</div>
  <ZgTooltip placement="top" appendTo=".testClass" teleported>
    <template #content> multiple lines<br />second line </template>
    <ZgButton>Top center</ZgButton>
  </ZgTooltip>
  <ZgTooltip placement="top-start" appendTo="#testId" teleported>
    <template #content> multiple lines<br />second line </template>
    <ZgButton>top start</ZgButton>
  </ZgTooltip>
</template>

<style>
.testClass,
#testId {
  width: 150px;
  height: 50px;
  margin: 20px;
}
</style>

<script lang="ts" setup>
// import { ref } from 'vue'
</script>
<template>
  <div class="testClass">class="testClass"</div>
  <div id="testId">id="testId"</div>
  <ZgTooltip placement="top" appendTo=".testClass" teleported>
    <template #content> multiple lines<br />second line </template>
    <ZgButton>Top center</ZgButton>
  </ZgTooltip>
  <ZgTooltip placement="top-start" appendTo="#testId" teleported>
    <template #content> multiple lines<br />second line </template>
    <ZgButton>top start</ZgButton>
  </ZgTooltip>
</template>

<style>
.testClass,
#testId {
  width: 150px;
  height: 50px;
  margin: 20px;
}
</style>

Name	Description	Type	Default
content	显示的内容，也可被 slot#content 覆盖	string	''
trigger	如何触发 Tooltip	`enum - 'hover' \| 'click'`	hover
manual	启动收到模式	`boolean`	false
popperOptions	是否显示切换密码图标	`boolean`	false
placeholder	popper.js 参数	`object 请参考 popper.js 文档`	{}
transition	动画名称	`string`	'fade-in-linear'
visible	Tooltip 组件可见性	`boolean`	—
showAfter	在触发后多久显示内容，单位毫秒	`number`	0
hideAfter	延迟关闭，单位毫秒	`number`	0
appendTo	指示 Tooltip 的内容将附加在哪一个网页元素上	`string`	—
teleported	是否使用 teleport。设置成 true则会被追加到 append-to 的位置	`boolean`	false
placement	Tooltip 组件出现的位置	`enum - 'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'`	top

Input Events

事件名	说明	类型
visible-change	提示框状态改变	`(value: boolean) => void`
click-outside	是否点击容器之外的位置	`(value: boolean) => void`

Input Slots

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

Exposes

名称	说明	类型
onOpen	onOpen 方法控制 el-tooltip 显示状态	`() => void`
onClose	onClose 方法控制 el-tooltip 显示状态	`() => void`

Tooltip 文字提示

基础用法

更多内容的文字提示

手动控制模式

延时打开关闭

追加到 append-to 的位置

Tooltip Attributes

Input Events

Input Slots

Exposes

Tooltip 文字提示 ​

基础用法 ​

更多内容的文字提示 ​

手动控制模式 ​

延时打开关闭 ​

追加到 append-to 的位置 ​

Tooltip Attributes ​

Input Events ​

Input Slots ​

Exposes ​

Tooltip 文字提示

基础用法

更多内容的文字提示

手动控制模式

延时打开关闭

追加到 append-to 的位置

Tooltip Attributes

Input Events

Input Slots

Exposes