Tooltip 文字提示组件 ​

s-tooltip 基于 Element Plus el-tooltip 封装，额外提供了“文本溢出时才显示提示”和“多行省略”能力，适合表格列、描述信息、按钮说明等场景。

Element Plus Tooltip 文档

Hidden Title ​

属性事件插槽简介 ​

基础用法 ​

通常用法 ​

主题与点击事件 ​

最大行数 ​

触发方式 ​

延迟触发 ​

自定义主题和禁用状态 ​

显示 HTML / VNode 内容 ​

自定义插槽 ​

受控模式 ​

全局默认配置 ​

tooltip 支持在 app.use 的第二个参数里配置全局默认值，写法和 Element Plus 的全局配置保持一致。 除 width、lineClamp、showSlot、effect 这些封装属性外，Element Plus Tooltip 的属性可直接写在 tooltip 下。

app.use(SybzComponents, {
  tooltip: {
    width: '240px',
    lineClamp: 2,
    effect: 'light',
    placement: 'top',
    showAfter: 1000,
  },
})

app.use(SybzComponents, {
  tooltip: {
    width: '240px',
    lineClamp: 2,
    effect: 'light',
    placement: 'top',
    showAfter: 1000,
  },
})

组件属性 ​

常用透传属性 ​

事件 ​

插槽 ​

说明 ​

• 未传默认插槽时，组件会把 content 作为展示文本，并在文本超出可视区域后才显示 tooltip。
• 传入默认插槽后，tooltip 会按正常交互触发，不再做文本溢出判断。
• 设置 lineClamp 大于 1 后，会按最大行数进行多行省略；超出可视高度时同样会显示 tooltip。
• lineClamp 只作用于组件默认渲染的文本区域，不影响自定义触发插槽的布局。
• content 支持字符串、HTML 字符串、VNode，以及 content 插槽形式的动态内容。
• 更多配置请参考 Element Plus Tooltip 文档。