Tooltip 文字提示

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

TIP

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

基础用法

<template>
	<div class="tooltip-base-box">
		<div class="row center">
			<vr-tooltip
				class="box-item"
				content="Top Left prompts info"
				placement="top-start">
				<vr-button>top-start</vr-button>
			</vr-tooltip>
			<vr-tooltip
				class="box-item"
				content="Top Center prompts info"
				placement="top">
				<vr-button>top</vr-button>
			</vr-tooltip>
			<vr-tooltip
				class="box-item"
				content="Top Right prompts info"
				placement="top-end">
				<vr-button>top-end</vr-button>
			</vr-tooltip>
		</div>
		<div class="row">
			<vr-tooltip
				class="box-item"
				content="Left Top prompts info"
				placement="left-start">
				<vr-button>left-start</vr-button>
			</vr-tooltip>
			<vr-tooltip
				class="box-item"
				content="Right Top prompts info"
				placement="right-start">
				<vr-button>right-start</vr-button>
			</vr-tooltip>
		</div>
		<div class="row">
			<vr-tooltip
				class="box-item"
				content="Left Center prompts info"
				placement="left">
				<vr-button class="mt-3 mb-3">left</vr-button>
			</vr-tooltip>
			<vr-tooltip
				class="box-item"
				content="Right Center prompts info"
				placement="right">
				<vr-button>right</vr-button>
			</vr-tooltip>
		</div>
		<div class="row">
			<vr-tooltip
				class="box-item"
				content="Left Bottom prompts info"
				placement="left-end">
				<vr-button>left-end</vr-button>
			</vr-tooltip>
			<vr-tooltip
				class="box-item"
				content="Right Bottom prompts info"
				placement="right-end">
				<vr-button>right-end</vr-button>
			</vr-tooltip>
		</div>
		<div class="row center">
			<vr-tooltip
				class="box-item"
				content="Bottom Left prompts info"
				placement="bottom-start">
				<vr-button>bottom-start</vr-button>
			</vr-tooltip>
			<vr-tooltip
				class="box-item"
				content="Bottom Center prompts info"
				placement="bottom">
				<vr-button>bottom</vr-button>
			</vr-tooltip>
			<vr-tooltip
				class="box-item"
				content="Bottom Right prompts info"
				placement="bottom-end">
				<vr-button>bottom-end</vr-button>
			</vr-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>
	<vr-tooltip placement="top">
		<template #content> multiple lines<br />second line </template>
		<vr-button>Top center</vr-button>
	</vr-tooltip>
</template>

禁用状态

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

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

	const disabled = ref(false)
</script>

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

延迟显示

<template>
    <vr-tooltip
      content="延迟 1000ms 后消失"
      :show-timeout="500"
      :hide-timeout="1000">
      <vr-button>延迟 500ms 后出现</vr-button>
    </vr-tooltip>
  </template>

Popper 配置

Popper.js 的定位策略（如 'bottom'） 具体使用见 popper.js

示例 放置被设置为底部 ，但如果该放置不适合，则将使用相反的顶部放置

<script lang="ts" setup>
	import { onMounted, ref } from 'vue'

	const boundary = ref<string | Element>('viewport') // 默认值

	onMounted(() => {
		const customBoundary = document.querySelector('.custom-boundary')
		if (customBoundary) {
			boundary.value = customBoundary
		}
	})

	const options = {
		fallbackPlacements: ['top-start', 'top-end', 'bottom-start', 'bottom-end'],
		padding: { top: 30, right: 5, bottom: 30, left: 5 },
		boundary: boundary.value, // 动态绑定到 ref 值
		rootBoundary: 'document',
		flipVariations: true,
		allowedAutoPlacements: ['top', 'bottom'],
	}
</script>

<template>
	<vr-tooltip
		content="Try to scroll"
		placement="bottom"
		:popperOptions="options">
		<vr-button>尝试向上滚动</vr-button>
	</vr-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