主题色 灰色 夜间模式 组件大小小(1) 中(2) 大(3) 组件圆角 组件缩放90% 95% 100% 105% 110%
none
small
medium
large
full
Tooltip 基于 Popover,但是比其多了一个功能,即检测 overflow 并决定是否展示。目前不确定是否值得为了这一个功能单开一个组件,毕竟其完全依赖于Popover,或许可以直接将这个功能放入Popover中?(添加两个trigger:overflow-open和overflow-enable)
通过设置overflow
属性,Tooltip 可配置内容溢出后的表现,可选值有:
open
: 当内容溢出后始终展示 tooltipenable
: 当内容溢出后启用 tooltip,通过triggers
来设定触发方式类似于 Popover,通过attachTarget
方法可以使 Tooltip 监听多个目标,同时会将它们也添加为 Popover target。想要监听额外目标是否溢出,则需要指定overflow
选项
值得注意的是,若多个目标将overflow
设为open
且它们都溢出了,Tooltip 会在第一个溢出的元素处展示
attachTarget: (el: Element, options?: {
overflow?: MaybeRefLikeOrGetter<'enable' | 'open'>;
isDisabled?: MaybeRefLikeOrGetter<boolean>;
/** 手动指定元素的文本,不指定则:当元素有value属性时取value,否则取innerText */
getText?: (el: HTMLElement) => string;
/** 默认为true */
trim?: boolean;
/** 检查溢出时是否测量文本的宽度,默认为true */
measure?: boolean;
}) => void