elementui tooltip

关于 ElementUI Tooltip 的使用

ElementUI 的 Tooltip 组件用于在鼠标悬停时显示提示信息，适用于按钮、图标或其他需要额外说明的 UI 元素。

基本用法

通过 el-tooltip 包裹目标元素，并设置 content 属性定义提示内容：

<el-tooltip content="这是提示文字" placement="top">
  <el-button>悬停查看提示</el-button>
</el-tooltip>

• placement 控制提示框位置，可选值：top、bottom、left、right。

自定义样式

通过 effect 修改主题（默认 dark），或使用 popper-class 添加自定义类名：

<el-tooltip content="浅色主题" effect="light" popper-class="custom-tooltip">
  <el-button>悬停查看</el-button>
</el-tooltip>

CSS 示例：

.custom-tooltip {
  font-size: 14px;
  background-color: #f0f9eb;
  color: #67c23a;
}

动态内容

通过 v-model 或插槽实现动态内容绑定：

<el-tooltip :content="dynamicText" placement="bottom">
  <el-button>动态提示</el-button>
</el-tooltip>

或使用插槽：

<el-tooltip placement="top">
  <div slot="content">插槽内容：{{ dynamicText }}</div>
  <el-button>插槽提示</el-button>
</el-tooltip>

禁用与延迟

• 禁用提示：disabled 属性设为 true。
• 延迟显示：通过 open-delay（单位毫秒）控制。

<el-tooltip content="延迟 1 秒显示" :open-delay="1000">
  <el-button>延迟提示</el-button>
</el-tooltip>

高级用法

结合 el-popover 或自定义事件实现复杂交互，例如点击触发：

<el-tooltip 
  content="点击触发" 
  trigger="click"
  :visible-arrow="false">
  <el-button>点击显示</el-button>
</el-tooltip>

注意：ElementUI 2.x 版本中部分 API 可能不同，建议查阅官方文档以适配具体版本。