Tooltip 文字提示

文字提示，在鼠标 hover 时显示提示文字。

TIP

todo: 目前只是做了简单封装，待完善(effect 部分)

基础用法

<template>
  <div class="tooltip-base-box">
    <div class="row center">
      <x-tooltip
        class="box-item"
        content="Top Left prompts info"
        placement="top-start"
      >
        <x-button>top-start</x-button>
      </x-tooltip>
      <x-tooltip
        class="box-item"
        content="Top Center prompts info"
        placement="top"
      >
        <x-button>top</x-button>
      </x-tooltip>
      <x-tooltip
        class="box-item"
        content="Top Right prompts info"
        placement="top-end"
      >
        <x-button>top-end</x-button>
      </x-tooltip>
    </div>
    <div class="row">
      <x-tooltip
        class="box-item"
        content="Left Top prompts info"
        placement="left-start"
      >
        <x-button>left-start</x-button>
      </x-tooltip>
      <x-tooltip
        class="box-item"
        content="Right Top prompts info"
        placement="right-start"
      >
        <x-button>right-start</x-button>
      </x-tooltip>
    </div>
    <div class="row">
      <x-tooltip
        class="box-item"
        content="Left Center prompts info"
        placement="left"
      >
        <x-button class="mt-3 mb-3">left</x-button>
      </x-tooltip>
      <x-tooltip
        class="box-item"
        content="Right Center prompts info"
        placement="right"
      >
        <x-button>right</x-button>
      </x-tooltip>
    </div>
    <div class="row">
      <x-tooltip
        class="box-item"
        content="Left Bottom prompts info"
        placement="left-end"
      >
        <x-button>left-end</x-button>
      </x-tooltip>
      <x-tooltip
        class="box-item"
        content="Right Bottom prompts info"
        placement="right-end"
      >
        <x-button>right-end</x-button>
      </x-tooltip>
    </div>
    <div class="row center">
      <x-tooltip
        class="box-item"
        content="Bottom Left prompts info"
        placement="bottom-start"
      >
        <x-button>bottom-start</x-button>
      </x-tooltip>
      <x-tooltip
        class="box-item"
        content="Bottom Center prompts info"
        placement="bottom"
      >
        <x-button>bottom</x-button>
      </x-tooltip>
      <x-tooltip
        class="box-item"
        content="Bottom Right prompts info"
        placement="bottom-end"
      >
        <x-button>bottom-end</x-button>
      </x-tooltip>
    </div>
  </div>
</template>

<style>
.tooltip-base-box {
  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 {
  width: 110px;
  margin-top: 10px;
}
</style>

更多内容的文字提示

展示多行文本或者设置内容的格式 通过 content 插槽设置内容

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

禁用状态

禁用状态，鼠标悬停无法触发文字提示。disabled 属性可以满足这个需求。

<script lang="ts" setup>
import { ref } from "vue";

const disabled = ref(false);
</script>

<template>
  <x-tooltip
    :disabled="disabled"
    content="click to close tooltip function"
    placement="bottom"
  >
    <x-button @click="disabled = !disabled"
      >click to {{ disabled ? "active" : "close" }} tooltip function</x-button
    >
  </x-tooltip>
</template>

Tooltip API

Props

Name	Description	Type	Default
content	提示文字	string	-
disabled	是否禁用	boolean	false
placement	弹出位置	string	bottom
trigger	触发方式	string	hover
manual	手动控制	boolean	false
popper-options	popper 配置	object 参考popper.js	{}
transition	动画	string	fade
show-timeout	显示延时	number	0
hide-timeout	隐藏延时	number	200

Events

Name	Description	Type
visible-change	显示隐藏状态改变时触发	(visible: boolean) => void
click-outside	点击外部时触发	() => void

Slots

Name	Description
default	默认插槽
content	内容插槽

Expose

Name	Description	Type
show	显示	() => void
hide	隐藏	() => void