使用场景
为控件提供短说明，不承载必须完成的业务操作。
焦点与悬停提示
按钮获得焦点或鼠标悬停时显示提示；复杂说明通过 content 插槽。
焦点与悬停提示
vue
<template>
<AsamTooltip placement="top" :trigger="['hover', 'focus']" :show-after="100">
<AsamButton type="default" native-type="button">查看提示</AsamButton>
<template #content>草稿保存在当前设备。<br />按完成提交。</template>
</AsamTooltip>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTooltipBasicDemo' });
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip placement="top" :trigger="['hover', 'focus']" :show-after="100">
<AsamButton type="default" native-type="button">查看提示</AsamButton>
<template #content>草稿保存在当前设备。<br />按完成提交。</template>
</AsamTooltip>
</template>
<script setup>
defineOptions({ name: 'AsamTooltipBasicDemo' });
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>受控提示
两个按钮均由宿主切换 visible 状态。示例将 trigger 与 triggerKeys 设为空数组，避免宿主切换与默认自动触发同时执行。
受控提示
vue
<template>
<div class="actions">
<AsamButton type="default" native-type="button" @click="visible = !visible"
>切换提示</AsamButton
>
<AsamTooltip
v-model:visible="visible"
content="由宿主控制显隐"
:trigger="[]"
:trigger-keys="[]"
>
<AsamButton type="default" native-type="button" @click="visible = !visible"
>提示锚点</AsamButton
>
</AsamTooltip>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamTooltipControlledDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
const visible = ref(false);
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<div class="actions">
<AsamButton type="default" native-type="button" @click="visible = !visible"
>切换提示</AsamButton
>
<AsamTooltip
v-model:visible="visible"
content="由宿主控制显隐"
:trigger="[]"
:trigger-keys="[]"
>
<AsamButton type="default" native-type="button" @click="visible = !visible"
>提示锚点</AsamButton
>
</AsamTooltip>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamTooltipControlledDemo' });
import { ref } from 'vue';
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
const visible = ref(false);
</script>
<style scoped>
.actions {
display: flex;
flex-wrap: wrap;
gap: var(--asam-space-md);
align-items: center;
}
.panel {
padding: var(--asam-space-lg);
border: 1px solid var(--asam-color-border);
border-radius: var(--asam-radius-control);
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>使用约定
content 属性或 content 插槽提供提示；trigger、placement、showAfter/hideAfter、disabled、visible、virtualRef 和浮层定位参数决定交互。 完整说明。
完整用法
以下用法使用本库公开入口。每个示例提供完整 TS/JS SFC，参数、事件、插槽和实例类型见本页 API。服务实例由创建方负责关闭；HTML 内容仅用于调用方已知的可信字符串。
基本用法
基本用法
vue
<template>
<div class="tooltip-base-box demo-layout-1">
<div class="row center demo-layout-2">
<AsamTooltip
class="box-item"
effect="dark"
content="顶部左侧提示信息"
placement="top-start"
>
<AsamButton type="default">顶部左侧</AsamButton>
</AsamTooltip>
<AsamTooltip class="box-item" effect="dark" content="顶部居中提示信息" placement="top">
<AsamButton type="default">顶部</AsamButton>
</AsamTooltip>
<AsamTooltip
class="box-item"
effect="dark"
content="顶部右侧提示信息"
placement="top-end"
>
<AsamButton type="default">顶部右侧</AsamButton>
</AsamTooltip>
</div>
<div class="row demo-layout-3">
<AsamTooltip class="box-item" effect="dark" placement="left-start">
<template #content>
左上方
<br />
显示提示
</template>
<AsamButton type="default">左侧顶部</AsamButton>
</AsamTooltip>
<AsamTooltip class="box-item" effect="dark" placement="right-start">
<template #content>
右上方
<br />
显示提示
</template>
<AsamButton type="default">右侧顶部</AsamButton>
</AsamTooltip>
</div>
<div class="row demo-layout-4">
<AsamTooltip class="box-item" effect="dark" placement="left">
<template #content>
左侧居中
<br />
显示提示
</template>
<AsamButton type="default" class="mt-3 mb-3">左侧</AsamButton>
</AsamTooltip>
<AsamTooltip class="box-item" effect="dark" placement="right">
<template #content>
右侧居中
<br />
显示提示
</template>
<AsamButton type="default">右侧</AsamButton>
</AsamTooltip>
</div>
<div class="row demo-layout-5">
<AsamTooltip class="box-item" effect="dark" placement="left-end">
<template #content>
左下方
<br />
显示提示
</template>
<AsamButton type="default">左侧底部</AsamButton>
</AsamTooltip>
<AsamTooltip class="box-item" effect="dark" placement="right-end">
<template #content>
右下方
<br />
显示提示
</template>
<AsamButton type="default">右侧底部</AsamButton>
</AsamTooltip>
</div>
<div class="row center demo-layout-6">
<AsamTooltip
class="box-item"
effect="dark"
content="底部左侧提示信息"
placement="bottom-start"
>
<AsamButton type="default">底部左侧</AsamButton>
</AsamTooltip>
<AsamTooltip
class="box-item"
effect="dark"
content="底部居中提示信息"
placement="bottom"
>
<AsamButton type="default">底部</AsamButton>
</AsamTooltip>
<AsamTooltip
class="box-item"
effect="dark"
content="底部右侧提示信息"
placement="bottom-end"
>
<AsamButton type="default">底部右侧</AsamButton>
</AsamTooltip>
</div>
</div>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<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>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mt-3 {
margin-top: calc(var(--asam-space-xs) * 3);
}
.mb-3 {
margin-bottom: calc(var(--asam-space-xs) * 3);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2 {
gap: var(--asam-space-md);
}
.demo-layout-3 {
gap: var(--asam-space-md);
}
.demo-layout-4 {
gap: var(--asam-space-md);
}
.demo-layout-5 {
gap: var(--asam-space-md);
}
.demo-layout-6 {
gap: var(--asam-space-md);
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<div class="tooltip-base-box demo-layout-1">
<div class="row center demo-layout-2">
<AsamTooltip
class="box-item"
effect="dark"
content="顶部左侧提示信息"
placement="top-start"
>
<AsamButton type="default">顶部左侧</AsamButton>
</AsamTooltip>
<AsamTooltip class="box-item" effect="dark" content="顶部居中提示信息" placement="top">
<AsamButton type="default">顶部</AsamButton>
</AsamTooltip>
<AsamTooltip
class="box-item"
effect="dark"
content="顶部右侧提示信息"
placement="top-end"
>
<AsamButton type="default">顶部右侧</AsamButton>
</AsamTooltip>
</div>
<div class="row demo-layout-3">
<AsamTooltip class="box-item" effect="dark" placement="left-start">
<template #content>
左上方
<br />
显示提示
</template>
<AsamButton type="default">左侧顶部</AsamButton>
</AsamTooltip>
<AsamTooltip class="box-item" effect="dark" placement="right-start">
<template #content>
右上方
<br />
显示提示
</template>
<AsamButton type="default">右侧顶部</AsamButton>
</AsamTooltip>
</div>
<div class="row demo-layout-4">
<AsamTooltip class="box-item" effect="dark" placement="left">
<template #content>
左侧居中
<br />
显示提示
</template>
<AsamButton type="default" class="mt-3 mb-3">左侧</AsamButton>
</AsamTooltip>
<AsamTooltip class="box-item" effect="dark" placement="right">
<template #content>
右侧居中
<br />
显示提示
</template>
<AsamButton type="default">右侧</AsamButton>
</AsamTooltip>
</div>
<div class="row demo-layout-5">
<AsamTooltip class="box-item" effect="dark" placement="left-end">
<template #content>
左下方
<br />
显示提示
</template>
<AsamButton type="default">左侧底部</AsamButton>
</AsamTooltip>
<AsamTooltip class="box-item" effect="dark" placement="right-end">
<template #content>
右下方
<br />
显示提示
</template>
<AsamButton type="default">右侧底部</AsamButton>
</AsamTooltip>
</div>
<div class="row center demo-layout-6">
<AsamTooltip
class="box-item"
effect="dark"
content="底部左侧提示信息"
placement="bottom-start"
>
<AsamButton type="default">底部左侧</AsamButton>
</AsamTooltip>
<AsamTooltip
class="box-item"
effect="dark"
content="底部居中提示信息"
placement="bottom"
>
<AsamButton type="default">底部</AsamButton>
</AsamTooltip>
<AsamTooltip
class="box-item"
effect="dark"
content="底部右侧提示信息"
placement="bottom-end"
>
<AsamButton type="default">底部右侧</AsamButton>
</AsamTooltip>
</div>
</div>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<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>
<style scoped>
/* Keep layout utilities local so the downloaded SFC needs no CSS preset. */
.mt-3 {
margin-top: calc(var(--asam-space-xs) * 3);
}
.mb-3 {
margin-bottom: calc(var(--asam-space-xs) * 3);
}
</style>
<style scoped>
.demo-layout-1 {
display: grid;
gap: var(--asam-space-md);
}
.demo-layout-2 {
gap: var(--asam-space-md);
}
.demo-layout-3 {
gap: var(--asam-space-md);
}
.demo-layout-4 {
gap: var(--asam-space-md);
}
.demo-layout-5 {
gap: var(--asam-space-md);
}
.demo-layout-6 {
gap: var(--asam-space-md);
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>主题
主题
vue
<template>
<AsamTooltip content="顶部居中" placement="top">
<AsamButton type="default">深色</AsamButton>
</AsamTooltip>
<AsamTooltip content="底部居中" placement="bottom" effect="light">
<AsamButton type="default">浅色</AsamButton>
</AsamTooltip>
<AsamTooltip content="底部居中" effect="customized">
<AsamButton type="default">自定义主题</AsamButton>
</AsamTooltip>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<style>
.el-popper.is-customized {
/* Set padding to ensure the height is 32px */
padding: 6px 12px;
background: linear-gradient(90deg, rgb(159 229 151), rgb(204 229 129));
}
.el-popper.is-customized .el-popper__arrow::before {
background: linear-gradient(45deg, #b2e68d, #bce689);
right: 0;
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip content="顶部居中" placement="top">
<AsamButton type="default">深色</AsamButton>
</AsamTooltip>
<AsamTooltip content="底部居中" placement="bottom" effect="light">
<AsamButton type="default">浅色</AsamButton>
</AsamTooltip>
<AsamTooltip content="底部居中" effect="customized">
<AsamButton type="default">自定义主题</AsamButton>
</AsamTooltip>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<style>
.el-popper.is-customized {
/* Set padding to ensure the height is 32px */
padding: 6px 12px;
background: linear-gradient(90deg, rgb(159 229 151), rgb(204 229 129));
}
.el-popper.is-customized .el-popper__arrow::before {
background: linear-gradient(45deg, #b2e68d, #bce689);
right: 0;
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>丰富内容
丰富内容
vue
<template>
<AsamTooltip placement="top">
<template #content> 多行文字<br />第二行 </template>
<AsamButton type="default">顶部居中</AsamButton>
</AsamTooltip>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip placement="top">
<template #content> 多行文字<br />第二行 </template>
<AsamButton type="default">顶部居中</AsamButton>
</AsamTooltip>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>动态状态
动态状态
vue
<template>
<AsamTooltip :disabled="disabled" content="点击关闭文字提示" placement="bottom" effect="light">
<AsamButton type="default" @click="disabled = !disabled">
点击以 {{ disabled ? '启用' : '关闭' }} 提示函数
</AsamButton>
</AsamTooltip>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { ref } from 'vue';
const disabled = ref(false);
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip :disabled="disabled" content="点击关闭文字提示" placement="bottom" effect="light">
<AsamButton type="default" @click="disabled = !disabled">
点击以 {{ disabled ? '启用' : '关闭' }} 提示函数
</AsamButton>
</AsamTooltip>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { ref } from 'vue';
const disabled = ref(false);
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>完整交互：html-content
完整交互：html-content
vue
<template>
<AsamTooltip content="<span>内容可以使用 <strong>HTML</strong></span>" raw-content>
<AsamButton type="default">悬停查看</AsamButton>
</AsamTooltip>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip content="<span>内容可以使用 <strong>HTML</strong></span>" raw-content>
<AsamButton type="default">悬停查看</AsamButton>
</AsamTooltip>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>虚拟触发目标
虚拟触发目标
vue
<template>
<AsamTooltip
:visible="visible"
content="底部居中"
placement="bottom"
effect="light"
trigger="click"
virtual-triggering
:virtual-ref="triggerRef"
/>
<AsamButton type="default" @click="visible = !visible">切换文字提示</AsamButton>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { onMounted, onUnmounted, ref } from 'vue';
const visible = ref(false);
const position = ref(DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 }));
const triggerRef = ref({
getBoundingClientRect: () => position.value
});
const mousemoveHandler = ({ clientX, clientY }: MouseEvent) => {
position.value = DOMRect.fromRect({
x: clientX,
y: clientY
});
};
onMounted(() => {
document.addEventListener('mousemove', mousemoveHandler);
});
onUnmounted(() => {
document.removeEventListener('mousemove', mousemoveHandler);
});
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip
:visible="visible"
content="底部居中"
placement="bottom"
effect="light"
trigger="click"
virtual-triggering
:virtual-ref="triggerRef"
/>
<AsamButton type="default" @click="visible = !visible">切换文字提示</AsamButton>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { onMounted, onUnmounted, ref } from 'vue';
const visible = ref(false);
const position = ref(DOMRect.fromRect({ x: 0, y: 0, width: 0, height: 0 }));
const triggerRef = ref({
getBoundingClientRect: () => position.value
});
const mousemoveHandler = ({ clientX, clientY }) => {
position.value = DOMRect.fromRect({
x: clientX,
y: clientY
});
};
onMounted(() => {
document.addEventListener('mousemove', mousemoveHandler);
});
onUnmounted(() => {
document.removeEventListener('mousemove', mousemoveHandler);
});
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>共享浮层切换目标
共享浮层切换目标
vue
<template>
<div class="demo-root-layout">
<div class="tooltip-references">
<span v-for="i in 3" :key="i" @mouseover="setReference"
><AsamButton type="default" @click="visible = !visible"
>点击打开提示</AsamButton
></span
>
</div>
<AsamTooltip
ref="tooltipRef"
:visible="visible"
:popper-options="{
modifiers: [
{
name: 'computeStyles',
options: {
adaptive: false,
enabled: false
}
}
]
}"
:virtual-ref="buttonRef"
virtual-triggering
popper-class="singleton-tooltip"
>
<template #content>
<span> 示例内容 </span>
</template>
</AsamTooltip>
</div>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { ref } from 'vue';
const buttonRef = ref<HTMLElement>();
const tooltipRef = ref();
const visible = ref(false);
const setReference = (event: MouseEvent) => {
buttonRef.value = event.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;
};
</script>
<style>
.singleton-tooltip {
transition: transform 0.3s var(--el-transition-function-fast-bezier);
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
.tooltip-references {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<div class="demo-root-layout">
<div class="tooltip-references">
<span v-for="i in 3" :key="i" @mouseover="setReference"
><AsamButton type="default" @click="visible = !visible"
>点击打开提示</AsamButton
></span
>
</div>
<AsamTooltip
ref="tooltipRef"
:visible="visible"
:popper-options="{
modifiers: [
{
name: 'computeStyles',
options: {
adaptive: false,
enabled: false
}
}
]
}"
:virtual-ref="buttonRef"
virtual-triggering
popper-class="singleton-tooltip"
>
<template #content>
<span> 示例内容 </span>
</template>
</AsamTooltip>
</div>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { ref } from 'vue';
const buttonRef = ref();
const tooltipRef = ref();
const visible = ref(false);
const setReference = (event) => {
buttonRef.value = event.currentTarget instanceof HTMLElement ? event.currentTarget : undefined;
};
</script>
<style>
.singleton-tooltip {
transition: transform 0.3s var(--el-transition-function-fast-bezier);
}
</style>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>
<style scoped>
.tooltip-references {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>受控显隐
受控显隐
vue
<template>
<AsamTooltip :visible="visible">
<template #content>
<span>内容</span>
</template>
<span @mouseenter="visible = true" @mouseleave="visible = false"
><AsamButton type="default"> 悬停查看 </AsamButton></span
>
</AsamTooltip>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { ref } from 'vue';
const visible = ref(false);
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip :visible="visible">
<template #content>
<span>内容</span>
</template>
<span @mouseenter="visible = true" @mouseleave="visible = false"
><AsamButton type="default"> 悬停查看 </AsamButton></span
>
</AsamTooltip>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { ref } from 'vue';
const visible = ref(false);
</script>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>完整交互：animations
完整交互：animations
vue
<template>
<AsamTooltip content="这是一条文字提示" transition="slide-fade">
<AsamButton type="default">触发操作</AsamButton>
</AsamTooltip>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<style>
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(120px);
opacity: 0;
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip content="这是一条文字提示" transition="slide-fade">
<AsamButton type="default">触发操作</AsamButton>
</AsamTooltip>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
</script>
<style>
.slide-fade-enter-active {
transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter-from,
.slide-fade-leave-to {
transform: translateX(120px);
opacity: 0;
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>自定义挂载容器
自定义挂载容器
vue
<template>
<AsamTooltip
:append-to="targetElement"
trigger="click"
content="挂载到 .target 容器"
placement="top"
>
<AsamButton type="default" class="target">点击打开提示</AsamButton>
</AsamTooltip>
</template>
<script lang="ts" setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { onMounted, ref } from 'vue';
const targetElement = ref('');
onMounted(() => {
targetElement.value = '.target';
});
</script>
<style scoped>
.target {
position: relative;
margin-top: 20px;
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>vue
<template>
<AsamTooltip
:append-to="targetElement"
trigger="click"
content="挂载到 .target 容器"
placement="top"
>
<AsamButton type="default" class="target">点击打开提示</AsamButton>
</AsamTooltip>
</template>
<script setup>
import { AsamButton, AsamTooltip } from '@asam-ui/ui';
import { onMounted, ref } from 'vue';
const targetElement = ref('');
onMounted(() => {
targetElement.value = '.target';
});
</script>
<style scoped>
.target {
position: relative;
margin-top: 20px;
}
</style>
<!-- 兼容已发布 0.1.0-alpha.1 的深色浮层样式；仅修正 ASAM 颜色变量。 -->
<style>
:root .asam-tooltip.el-popper.is-dark, :root .asam-popper-content.el-popper.is-dark { --el-text-color-primary: var(--asam-color-text-primary); color: var(--asam-color-surface); }
</style>组合职责与生命周期
default 提供触发内容，content 或 content 插槽提供提示。 完整说明。
局部与全局浮层
基础示例使用默认的全局挂载；局部挂载示例展示显式配置的 teleported 或 appendTo。先打开控件浮层，再观察其所在容器。挂载位置与控件值、请求协议互相独立。
API
属性 AsamTooltipProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
showArrow | tooltip 的内容是否有箭头 | boolean | undefined | true |
onUpdate:visible | — | ((value: boolean) => void) | undefined | undefined |
role | 角色决定 ARIA 属性的分配方式。 | enum"group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree"完整类型："group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined | "tooltip" |
appendTo | 指示 Tooltip 的内容将附加在哪一个网页元素上 | string | HTMLElement | undefined | undefined |
content | 自定义内容 | string | undefined | "" |
rawContent | content 中的内容是否作为 HTML 字符串处理 | boolean | undefined | false |
persistent | 提示关闭且 persistent 为 false 时销毁确认浮层。 | boolean | undefined | false |
visible | Tooltip 组件可见性 | boolean | null | undefined | null |
transition | 动画名称 | string | undefined | undefined |
teleported | 是否使用 teleport。设置成 true则会被追加到 append-to 的位置 | boolean | undefined | true |
disabled | Tooltip 组件是否禁用 | boolean | undefined | false |
ariaLabel | 和 aria-label 属性保持一致 | string | undefined | undefined |
showAfter | 延迟显示时间（以毫秒为单位），在受控模式下无效。 | number | undefined | 0 |
hideAfter | 消失延迟时间（以毫秒为单位），在受控模式下无效。 | number | undefined | 200 |
autoClose | 自动隐藏的毫秒时长；受控模式不生效。 | number | undefined | 0 |
gpuAcceleration | 是否使用 GPU 加速定位。 | boolean | undefined | true |
id | — | string | undefined | undefined |
style | — | (AsamTooltipProps)["style"] | undefined |
className | — | AsamTooltipProps["className"] | false |
effect | Tooltip 主题，内置了 dark / light 两种 | enum"light" | "dark"完整类型：(AsamTooltipProps)["effect"] | "dark" |
enterable | 鼠标是否可进入到 tooltip 中 | boolean | undefined | true |
pure | — | boolean | undefined | false |
focusOnShow | — | boolean | undefined | false |
trapping | — | boolean | undefined | false |
popperClass | 为 Tooltip 的 popper 添加自定义类名 | AsamTooltipProps["className"] | undefined |
popperStyle | 为 Tooltip 的 popper 添加自定义样式 | (AsamTooltipProps)["popperStyle"] | undefined |
referenceEl | — | HTMLElement | undefined | undefined |
triggerTargetEl | — | HTMLElement | undefined | undefined |
stopPopperMouseEvent | — | boolean | undefined | true |
virtualTriggering | 用来标识虚拟触发是否被启用 | boolean | undefined | false |
zIndex | — | number | undefined | undefined |
loop | — | boolean | undefined | false |
boundariesPadding | 浮层与边界之间的最小间距。 | number | undefined | 0 |
fallbackPlacements | 提示浮层可采用的位置列表，参阅 Popper 的 fallbackPlacements。 | (AsamTooltipProps)["fallbackPlacements"] | undefined |
offset | Tooltip 出现位置的偏移量 | number | undefined | 12 |
placement | Tooltip 组件出现的位置 | enum"auto" | "auto-start" | "auto-end" | "top" | "bottom" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"完整类型：(AsamTooltipProps)["placement"] | "bottom" |
popperOptions | Popper 配置参数。 | (AsamTooltipProps)["popperOptions"] | 工厂函数（每个实例创建） |
strategy | 浮层的 CSS 定位策略。 | enum"fixed" | "absolute"完整类型："fixed" | "absolute" | undefined | "absolute" |
arrowOffset | 箭头偏移量。 | number | undefined | 5 |
trigger | 提示框的触发方式（用于显示），在受控模式下无效。 | enum"hover" | "focus" | "click" | "contextmenu"完整类型：(AsamTooltipProps)["trigger"] | "hover" |
triggerKeys | 当通过鼠标点击使触发元素获得焦点时，可以定义一组键盘按键代码，通过键盘控制提示框的显示，在受控模式下无效。 | string[] | undefined | 工厂函数（每个实例创建） |
focusOnTarget | 当通过悬停触发提示时，是否聚焦触发元素，以提升可访问性 | boolean | undefined | false |
virtualRef | 浮层依附的参考元素。 | (AsamTooltipProps)["virtualRef"] | undefined |
onMouseenter | — | ((e: MouseEvent) => void) | undefined | undefined |
onMouseleave | — | ((e: MouseEvent) => void) | undefined | undefined |
onClick | — | ((e: PointerEvent) => void) | undefined | undefined |
onKeydown | — | ((e: KeyboardEvent) => void) | undefined | undefined |
onFocus | — | ((e: FocusEvent) => void) | undefined | undefined |
onBlur | — | ((e: FocusEvent) => void) | undefined | undefined |
onContextmenu | — | ((e: PointerEvent) => void) | undefined | undefined |
open | — | boolean | undefined | false |
事件 AsamTooltipEmits
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
update:visible | — | [value: boolean] | — |
before-show | — | [event?: Event | undefined] | — |
before-hide | — | [event?: Event | undefined] | — |
show | — | [event?: Event | undefined] | — |
hide | — | [event?: Event | undefined] | — |
open | — | [event?: Event | undefined] | — |
close | — | [event?: Event | undefined] | — |
插槽 AsamTooltipSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (() => unknown) | undefined | — |
content | — | (() => unknown) | undefined | — |
实例方法与状态 AsamTooltipExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
popperRef | el-popper 组件实例 | (AsamTooltipExpose)["popperRef"] | — |
hide | 提供 hide 方法 | (event?: Event) => void | — |
onClose | 公开 onClose，用于管理提示关闭状态。 | (event?: Event, delay?: number) => void | — |
onOpen | 公开 onOpen，用于管理提示打开状态。 | (event?: Event, delay?: number) => void | — |
contentRef | el-tooltip-content 组件实例 | (AsamTooltipExpose)["contentRef"] | — |
updatePopper | 更新 el-popper组件实例 | () => void | — |
isFocusInsideContent | 验证当前焦点事件是否在 el-tooltip-content 中触发 | (event?: FocusEvent) => boolean | undefined | — |
用法与契约补充说明
使用约定
content 属性或 content 插槽提供提示；trigger、placement、showAfter/hideAfter、disabled、visible、virtualRef 和浮层定位参数决定交互。visible 绑定用于受控模式，省略时由 trigger 管理。公开 hide、onOpen/onClose、updatePopper 可管理提示，复杂交互使用 Popover。默认插槽需提供一个可聚焦触发元素。本入口没有四档控件 size。
组合职责与生命周期
default 提供触发内容，content 或 content 插槽提供提示。visible 提供受控状态，trigger/triggerKeys、showAfter/hideAfter/autoClose、disabled 与 enterable 控制交互。virtualTriggering 配合 HTMLElement 或 getBoundingClientRect 目标；共享 singleton 面板切换 virtualRef 时更新定位，外部鼠标监听必须在卸载移除。appendTo/teleported/persistent 管理挂载和存活，effect/rawContent/transition/popperStyle/popperClass 管理呈现；HTML 只承接已知可信内容。公开 popperRef/contentRef/isFocusInsideContent、updatePopper、onOpen/onClose/hide 保留实时状态。
关联组件
参数与事件补充说明
固定 2.14.7 公开参数；运行时默认值来自已安装组件。
参数与事件说明
showArrow
必填：否；声明来源：上游声明。
showArrow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
onUpdate:visible
必填：否；声明来源：上游声明。
onUpdate:visible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(value: boolean): void
默认值与来源
undefined（已安装运行时；已安装组件）role
必填：否；声明来源：上游声明。
role 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："group" / "dialog" / "grid" / "listbox" / "menu" / "navigation" / "tooltip" / "tree"
默认值与来源
"tooltip"（已安装运行时；已安装组件）appendTo
必填：否；声明来源：上游声明。
appendTo 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码未声明 default（2.14.7；源码事实，未作为 ASAM 运行实测）
content
必填：否；声明来源：上游声明。
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
rawContent
必填：否；声明来源：上游声明。
rawContent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
persistent
必填：否；声明来源：上游声明。
persistent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
visible
必填：否；声明来源：上游声明。
visible 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
null（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：null（2.14.7；源码事实，未作为 ASAM 运行实测）
transition
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
teleported
必填：否；声明来源：上游声明。
teleported 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
disabled
必填：否；声明来源：上游声明。
disabled 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
ariaLabel
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
showAfter
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）hideAfter
必填：否；声明来源：上游声明。
默认值与来源
200（已安装运行时；已安装组件）autoClose
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）gpuAcceleration
必填：否；声明来源：上游声明。
gpuAcceleration 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）id
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）style
必填：否；声明来源：上游声明。
style 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）className
必填：否；声明来源：上游声明。
className 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
false（已安装运行时；已安装组件）effect
必填：否；声明来源：上游声明。
effect 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："light" / "dark"
默认值与来源
"dark"（已安装运行时；已安装组件）enterable
必填：否；声明来源：上游声明。
enterable 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）pure
必填：否；声明来源：上游声明。
pure 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）focusOnShow
必填：否；声明来源：上游声明。
focusOnShow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）trapping
必填：否；声明来源：上游声明。
trapping 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）popperClass
必填：否；声明来源：上游声明。
popperClass 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
默认值与来源
undefined（已安装运行时；已安装组件）popperStyle
必填：否；声明来源：上游声明。
popperStyle 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）referenceEl
必填：否；声明来源：上游声明。
referenceEl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）triggerTargetEl
必填：否；声明来源：上游声明。
triggerTargetEl 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
默认值与来源
undefined（已安装运行时；已安装组件）stopPopperMouseEvent
必填：否；声明来源：上游声明。
stopPopperMouseEvent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）virtualTriggering
必填：否；声明来源：上游声明。
virtualTriggering 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）zIndex
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）loop
必填：否；声明来源：上游声明。
loop 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）boundariesPadding
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）fallbackPlacements
必填：否；声明来源：上游声明。
默认值与来源
undefined（已安装运行时；已安装组件）offset
必填：否；声明来源：上游声明。
默认值与来源
12（已安装运行时；已安装组件）placement
必填：否；声明来源：上游声明。
placement 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："auto" / "auto-start" / "auto-end" / "top" / "bottom" / "right" / "left" / "top-start" / "top-end" / "bottom-start" / "bottom-end" / "right-start" / "right-end" / "left-start" / "left-end"
默认值与来源
"bottom"（已安装运行时；已安装组件）popperOptions
必填：否；声明来源：上游声明。
popperOptions 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
popperOptions.placement:AsamTooltipProps["placement"]— 依赖声明枚举：
"auto"/"auto-start"/"auto-end"/"top"/"bottom"/"right"/"left"/"top-start"/"top-end"/"bottom-start"/"bottom-end"/"right-start"/"right-end"/"left-start"/"left-end"popperOptions.modifiers:PublicMember<NonNullable<(AsamTooltipProps)["popperOptions"]>, "modifiers">— 依赖声明popperOptions.strategy:PublicMember<NonNullable<(AsamTooltipProps)["popperOptions"]>, "strategy">— 依赖声明枚举：
"fixed"/"absolute"popperOptions.onFirstUpdate:PublicMember<NonNullable<(AsamTooltipProps)["popperOptions"]>, "onFirstUpdate">— 依赖声明事件参数：
(arg0: Parameters<Extract<NonNullable<PublicMember<NonNullable<(AsamTooltipProps)["popperOptions"]>, "onFirstUpdate">>, (...args: never[]) => unknown>>[0]): void
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）strategy
必填：否；声明来源：上游声明。
strategy 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："fixed" / "absolute"
默认值与来源
"absolute"（已安装运行时；已安装组件）arrowOffset
必填：否；声明来源：上游声明。
默认值与来源
5（已安装运行时；已安装组件）trigger
必填：否；声明来源：上游声明。
trigger 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："hover" / "focus" / "click" / "contextmenu"
默认值与来源
"hover"（已安装运行时；已安装组件）固定上游文档默认：hover（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'hover'（2.14.7；源码事实，未作为 ASAM 运行实测）
triggerKeys
必填：否；声明来源：上游声明。
默认值与来源
工厂函数（每个实例创建）（实例工厂；已安装组件）固定上游文档默认：['Enter','Space']（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码工厂（未执行）：() => [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space]（2.14.7；源码事实，未作为 ASAM 运行实测）
focusOnTarget
必填：否；声明来源：上游声明。
focusOnTarget 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
virtualRef
必填：否；声明来源：上游声明。
virtualRef 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
virtualRef.getBoundingClientRect:() => DOMRect— 上游声明事件参数：
(): DOMRect
默认值与来源
undefined（已安装运行时；已安装组件）onMouseenter
必填：否；声明来源：上游声明。
onMouseenter 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: MouseEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）onMouseleave
必填：否；声明来源：上游声明。
onMouseleave 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: MouseEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）onClick
必填：否；声明来源：上游声明。
onClick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: PointerEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）onKeydown
必填：否；声明来源：上游声明。
onKeydown 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: KeyboardEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）onFocus
必填：否；声明来源：上游声明。
onFocus 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）onBlur
必填：否；声明来源：上游声明。
onBlur 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: FocusEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）onContextmenu
必填：否；声明来源：上游声明。
onContextmenu 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(e: PointerEvent): void
默认值与来源
undefined（已安装运行时；已安装组件）open
必填：否；声明来源：上游声明。
open 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（已安装运行时；已安装组件）AsamTooltipProps 公开类型视图
ts
import type { AsamTooltipProps } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamTooltipProps
type PublicContract = {
"showArrow"?: boolean | undefined;
"onUpdate:visible"?: ((value: boolean) => void) | undefined;
"role"?: "group" | "dialog" | "grid" | "listbox" | "menu" | "navigation" | "tooltip" | "tree" | undefined;
"appendTo"?: string | HTMLElement | undefined;
"content"?: string | undefined;
"rawContent"?: boolean | undefined;
"persistent"?: boolean | undefined;
"visible"?: boolean | null | undefined;
"transition"?: string | undefined;
"teleported"?: boolean | undefined;
"disabled"?: boolean | undefined;
"ariaLabel"?: string | undefined;
"showAfter"?: number | undefined;
"hideAfter"?: number | undefined;
"autoClose"?: number | undefined;
"gpuAcceleration"?: boolean | undefined;
"id"?: string | undefined;
"style"?: (AsamTooltipProps)["style"];
"className"?: AsamTooltipProps["className"];
"effect"?: (AsamTooltipProps)["effect"];
"enterable"?: boolean | undefined;
"pure"?: boolean | undefined;
"focusOnShow"?: boolean | undefined;
"trapping"?: boolean | undefined;
"popperClass"?: AsamTooltipProps["className"];
"popperStyle"?: (AsamTooltipProps)["popperStyle"];
"referenceEl"?: HTMLElement | undefined;
"triggerTargetEl"?: HTMLElement | undefined;
"stopPopperMouseEvent"?: boolean | undefined;
"virtualTriggering"?: boolean | undefined;
"zIndex"?: number | undefined;
"loop"?: boolean | undefined;
"boundariesPadding"?: number | undefined;
"fallbackPlacements"?: (AsamTooltipProps)["fallbackPlacements"];
"offset"?: number | undefined;
"placement"?: (AsamTooltipProps)["placement"];
"popperOptions"?: (AsamTooltipProps)["popperOptions"];
"strategy"?: "fixed" | "absolute" | undefined;
"arrowOffset"?: number | undefined;
"trigger"?: (AsamTooltipProps)["trigger"];
"triggerKeys"?: string[] | undefined;
"focusOnTarget"?: boolean | undefined;
"virtualRef"?: (AsamTooltipProps)["virtualRef"];
"onMouseenter"?: ((e: MouseEvent) => void) | undefined;
"onMouseleave"?: ((e: MouseEvent) => void) | undefined;
"onClick"?: ((e: PointerEvent) => void) | undefined;
"onKeydown"?: ((e: KeyboardEvent) => void) | undefined;
"onFocus"?: ((e: FocusEvent) => void) | undefined;
"onBlur"?: ((e: FocusEvent) => void) | undefined;
"onContextmenu"?: ((e: PointerEvent) => void) | undefined;
"open"?: boolean | undefined;
};参数与事件说明
update:visible
必填：是；声明来源：ASAM 声明。
before-show
必填：是；声明来源：ASAM 声明。
before-hide
必填：是；声明来源：ASAM 声明。
show
必填：是；声明来源：ASAM 声明。
hide
必填：是；声明来源：ASAM 声明。
open
必填：是；声明来源：ASAM 声明。
close
必填：是；声明来源：ASAM 声明。
AsamTooltipEmits 公开类型视图
ts
import type { AsamTooltipEmits } from '@asam-ui/ui';
// AsamTooltipEmits
type PublicContract = {
"update:visible": [value: boolean];
"before-show": [event?: Event | undefined];
"before-hide": [event?: Event | undefined];
"show": [event?: Event | undefined];
"hide": [event?: Event | undefined];
"open": [event?: Event | undefined];
"close": [event?: Event | undefined];
};参数与事件说明
default
必填：否；声明来源：ASAM 声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
content
必填：否；声明来源：ASAM 声明。
content 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): unknown
AsamTooltipSlots 公开类型视图
ts
import type { AsamTooltipSlots } from '@asam-ui/ui';
// AsamTooltipSlots
type PublicContract = {
"default"?: (() => unknown) | undefined;
"content"?: (() => unknown) | undefined;
};参数与事件说明
popperRef
必填：是；声明来源：上游声明。
hide
必填：是；声明来源：上游声明。
hide 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event?: Event | undefined): void
onClose
必填：是；声明来源：上游声明。
onClose 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event?: Event | undefined, delay?: number | undefined): void
onOpen
必填：是；声明来源：上游声明。
onOpen 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event?: Event | undefined, delay?: number | undefined): void
contentRef
必填：是；声明来源：上游声明。
updatePopper
必填：是；声明来源：上游声明。
updatePopper 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
isFocusInsideContent
必填：是；声明来源：上游声明。
isFocusInsideContent 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event?: FocusEvent | undefined): boolean | undefined
AsamTooltipExpose 公开类型视图
ts
import type { AsamTooltipExpose, AsamTooltipProps } from '@asam-ui/ui';
// AsamTooltipExpose
type PublicContract = {
"popperRef": (AsamTooltipExpose)["popperRef"];
"hide": (event?: Event) => void;
"onClose": (event?: Event, delay?: number) => void;
"onOpen": (event?: Event, delay?: number) => void;
"contentRef": (AsamTooltipExpose)["contentRef"];
"updatePopper": () => void;
"isFocusInsideContent": (event?: FocusEvent) => boolean | undefined;
};