Tooltip

用于展示鼠标悬停或点击时的提示信息。

基础用法

<template>
  <lb-tooltip content="Hello Tooltip">
    <lb-button>Hover me</lb-button>
  </lb-tooltip>
</template>

不同位置

<template>
  <div class="tooltip-placement-demo">
    <div class="row row_top">
      <lb-tooltip content="top-start" placement="top-start">
        <lb-button>top-start</lb-button>
      </lb-tooltip>
      <lb-tooltip content="top" placement="top">
        <lb-button>top</lb-button>
      </lb-tooltip>
      <lb-tooltip content="top-end" placement="top-end">
        <lb-button>top-end</lb-button>
      </lb-tooltip>
    </div>
    <div class="row">
      <lb-tooltip content="left-start" placement="left-start">
        <lb-button>left-start</lb-button>
      </lb-tooltip>
      <lb-tooltip content="right-start" placement="right-start">
        <lb-button>right-start</lb-button>
      </lb-tooltip>
    </div>
    <div class="row">
      <lb-tooltip content="left" placement="left">
        <lb-button>left</lb-button>
      </lb-tooltip>
      <lb-tooltip content="right" placement="right">
        <lb-button>right</lb-button>
      </lb-tooltip>
    </div>
    <div class="row">
      <lb-tooltip content="left-end" placement="left-end">
        <lb-button>left-end</lb-button>
      </lb-tooltip>
      <lb-tooltip content="right-end" placement="right-end">
        <lb-button>right-end</lb-button>
      </lb-tooltip>
    </div>
    <div class="row row_bottom">
      <lb-tooltip content="bottom-start" placement="bottom-start">
        <lb-button>bottom-start</lb-button>
      </lb-tooltip>
      <lb-tooltip content="bottom" placement="bottom">
        <lb-button>bottom</lb-button>
      </lb-tooltip>
      <lb-tooltip content="bottom-end" placement="bottom-end">
        <lb-button>bottom-end</lb-button>
      </lb-tooltip>
    </div>
  </div>
</template>

<style scoped>
.tooltip-placement-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.row {
  display: flex;
  width: 100%;
  justify-content: space-between;
  margin-bottom: 10px;
}
.lb-button {
  margin: 0 5px;
  width: 100px;
}
.row_top,
.row_bottom {
  justify-content: center;
}
</style>

不同触发方式

<template>
  <div class="tooltip-trigger-demo">
    <lb-tooltip content="Hover to trigger" trigger="hover">
      <lb-button>Hover me</lb-button>
    </lb-tooltip>
    <lb-tooltip content="Click to trigger" trigger="click">
      <lb-button>Click me</lb-button>
    </lb-tooltip>
    <lb-tooltip content="Focus to trigger" trigger="focus">
      <lb-button>Focus me</lb-button>
    </lb-tooltip>
  </div>
</template>

<style scoped>
.tooltip-trigger-demo {
  display: flex;
  gap: 10px;
}
</style>

自定义内容

<template>
  <div class=".custom-content-demo">
    <lb-tooltip>
      <lb-button class="virtual-trigger">自定义内容</lb-button>
      <template #content>
        <p>Custom Content</p>
        <div
          style="
            width: 100%;
            display: flex;
            justify-content: flex-end;
            gap: 3px;
          "
        >
          <lb-button size="small">取消</lb-button>
          <lb-button size="small" type="primary">确定</lb-button>
        </div>
      </template>
    </lb-tooltip>
  </div>
</template>

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

<style scoped>
.custom-content-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100px;
}
</style>

虚拟触发

当我们想要给好几个元素添加 tooltip，为了减少 DOM 元素，可以使用虚拟触发。

注意

虚拟触发属于受控组件，需要手动控制显示/隐藏，点击空白处无法隐藏。

<template>
  <div class="virtual-triggering-demo">
    <lb-button
      v-for="i in 2"
      :key="i"
      class="virtual-trigger"
      @mousemove="(e) => (virtualRef = e.currentTarget)"
      @click="visible = !visible"
    >
      Click me {{ i }}
    </lb-button>
    <lb-tooltip
      content="Hello Virtual Trigger"
      virtualTriggering
      :visible="visible"
      :virtualRef="virtualRef"
    ></lb-tooltip>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const visible = ref(false);
const virtualRef = ref<HTMLElement | undefined>();
</script>

<style scoped>
.virtual-triggering-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 100px;
}
</style>

Tooltip Props

Attribute	Description	Type	Accepted Values	Default
content	显示的内容	string	—	''
showAfter	延迟显示，单位毫秒	number	—	300
hideAfter	延迟隐藏，单位毫秒	number	—	300
strategy	定位策略	'absolute' | 'fixed'	absolute / fixed	absolute
trigger	触发方式	'hover' | 'click' | 'focus'	hover / click / focus	hover
transition	动画名称	string	—	lb-fade
placement	出现位置	'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'	—	top
offset	偏移量	number	—	9
disabled	是否禁用	boolean	true / false	false
popperClass	Popper 的自定义类名	string	—	''
virtualTriggering	是否使用虚拟触发	boolean	true / false	false
virtualRef	虚拟触发的引用元素	HTMLElement	—	undefined

Tooltip Events

Event Name	Description	Parameters
visible	气泡显示/隐藏时触发	(visible: boolean)