Skip to content
主题色
灰色
夜间模式组件大小小(1)中(2)大(3)组件圆角
none
small
medium
large
full
组件缩放90%95%100%105%110%

Tooltip 基于 Popover,但是比其多了一个功能,即检测 overflow 并决定是否展示。目前不确定是否值得为了这一个功能单开一个组件,毕竟其完全依赖于Popover,或许可以直接将这个功能放入Popover中?(添加两个trigger:overflow-open和overflow-enable)

溢出行为

通过设置overflow属性,Tooltip 可配置内容溢出后的表现,可选值有:

  • open: 当内容溢出后始终展示 tooltip
  • enable: 当内容溢出后启用 tooltip,通过triggers来设定触发方式
溢出提示
溢出溢出溢出溢出
溢出提示
溢出溢出溢出溢出

单例监听多个目标

类似于 Popover,通过attachTarget方法可以使 Tooltip 监听多个目标,同时会将它们也添加为 Popover target。想要监听额外目标是否溢出,则需要指定overflow选项

值得注意的是,若多个目标将overflow设为open且它们都溢出了,Tooltip 会在第一个溢出的元素处展示

ts
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