elementui tooltip

Element UI Tooltip 组件使用指南

Element UI 的 Tooltip 组件用于在鼠标悬停时显示提示信息，常用于解释按钮、图标或其他交互元素的功能。

基本用法

通过 el-tooltip 标签包裹需要触发提示的元素，设置 content 属性定义提示内容。

<el-tooltip content="这是一段提示信息" placement="top">
  <el-button>悬停显示提示</el-button>
</el-tooltip>

常用属性

• content: 提示内容，支持字符串或 HTML 片段。
• placement: 提示位置，可选值包括 top, bottom, left, right 及其带 -start 和 -end 的变体。
• effect: 主题样式，可选 dark（默认）或 light。
• disabled: 是否禁用提示，设置为 true 时不会显示提示。
• transition: 定义显示/隐藏的过渡动画名称，默认为 el-fade-in-linear。

高级用法

动态控制提示内容可通过 v-model 绑定变量实现。

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

通过插槽自定义提示内容，使用 slot="content" 定义复杂结构。

<el-tooltip placement="top">
  <div slot="content">
    自定义 <strong>HTML</strong> 提示内容
  </div>
  <el-button>插槽提示</el-button>
</el-tooltip>

样式定制

通过全局 CSS 变量或局部样式覆盖默认样式。例如修改背景色和文字颜色：

.el-tooltip__popper {
  background-color: #ff0000 !important;
  color: #ffffff !important;
}

注意事项

• 提示内容过长时建议设置 max-width 避免布局问题。
• 动态内容更新时需确保 Tooltip 实例重新计算位置。
• 在表格或弹窗中使用时注意 z-index 层级问题。

以上内容涵盖了 Element UI Tooltip 的核心功能和使用场景，可根据实际需求选择合适的方式集成到项目中。