tooltip 文字提示

鼠标 hover 时的提示信息。

基础用法

文字有9种不同位置，默认为 top。

查看代码

<template>
	<demo-container>
		<gov-tooltip content="Top start 提示文字" placement="top-start">
			<gov-button>居上左侧</gov-button>
		</gov-tooltip>
		&nbsp;
		<gov-tooltip content="Top 提示文字" placement="top">
			<gov-button>居上中间</gov-button>
		</gov-tooltip>
		&nbsp;
		<gov-tooltip content="Top start 提示文字" placement="top-end">
			<gov-button>居上右侧</gov-button>
		</gov-tooltip>
		<hr />
		<gov-tooltip content="Right start 提示文字" placement="right-start">
			<gov-button>居右左侧</gov-button>
		</gov-tooltip>
		&nbsp;
		<gov-tooltip content="Right 提示文字" placement="right">
			<gov-button>居右中间</gov-button>
		</gov-tooltip>
		&nbsp;
		<gov-tooltip content="Right start 提示文字" placement="right-end">
			<gov-button>居右右侧</gov-button>
		</gov-tooltip>
		<hr />
		<gov-tooltip content="Bottom start 提示文字" placement="bottom-start">
			<gov-button>居下左侧</gov-button>
		</gov-tooltip>
		&nbsp;
		<gov-tooltip content="Bottom 提示文字" placement="bottom">
			<gov-button>居下中间</gov-button>
		</gov-tooltip>
		&nbsp;
		<gov-tooltip content="Bottom start 提示文字" placement="bottom-end">
			<gov-button>居下右侧</gov-button>
		</gov-tooltip>
		<hr />
		<gov-tooltip content="Left start 提示文字" placement="left-start">
			<gov-button>居左左侧</gov-button>
		</gov-tooltip>
		&nbsp;
		<gov-tooltip content="Left 提示文字" placement="left">
			<gov-button>居左中间</gov-button>
		</gov-tooltip>
		&nbsp;
		<gov-tooltip content="Left start 提示文字" placement="left-end">
			<gov-button>居左右侧</gov-button>
		</gov-tooltip>
		<hr />
	</demo-container>
</template>

关闭提示

设置 disabled 为 true 即可关闭提示。

查看代码

<template>
	<demo-container>
		<gov-tooltip content="点击关闭 Tooltip 提示" :disabled="disabled">
			<gov-button @click="handleToggle">
				点击{{ disabled ? "开启" : "关闭" }} Tooltip 提示
			</gov-button>
		</gov-tooltip>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const disabled = ref(false);
function handleToggle() {
	disabled.value = !disabled.value;
}
</script>

自定义内容

查看代码

<template>
	<demo-container>
		<gov-tooltip>
			<gov-button> 鼠标经过查看内容 </gov-button>
			<template #content>
				<div style="font-size: 16px">枫桥夜泊</div>
				<div style="font-size: 14px">
					月落乌啼霜满天，江枫渔火对愁眠。
					<br />
					姑苏城外寒山寺，夜半钟声到客船。
				</div>
			</template>
		</gov-tooltip>
	</demo-container>
</template>

<script setup></script>

Attributes

属性名	说明	类型	可选值	默认值
content	提示内容	String	—	—
disabled	是否禁用提示	Boolean	true, false	false
placement	提示位置	String	top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end	top

Events

事件名	说明	回调参数
toggle	触发提示显示或隐藏	true 显示，false 隐藏
show	提示显示时触发	—
hide	提示隐藏时触发	—

Slots

插槽名	说明	作用域插槽	内容
default	触发提示的元素	否	放置触发提示的元素，如按钮或其他元素。
content	自定义提示内容	是	可以自定义提示的内容，而不是使用 props.content 的文本。