element-ui/examples/docs/tooltip.md

基础用法

鼠标 hover 的时候显示,可选择提示出现的位置。

上左 上边 上右

左上 左边 左下

<el-tooltip class="item" :effect="effect" content="Right Top 提示文字" placement="right-start">
  <el-button>右上</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Right Center 提示文字" placement="right">
  <el-button>右边</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Right Bottom 提示文字" placement="right-end">
  <el-button>右下</el-button>
</el-tooltip>

<el-tooltip class="item" :effect="effect" content="Bottom Left 提示文字" placement="bottom-start">
  <el-button>下左</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Bottom Center 提示文字" placement="bottom">
  <el-button>下边</el-button>
</el-tooltip>
<el-tooltip class="item" :effect="effect" content="Bottom Right 提示文字" placement="bottom-end">
  <el-button>下右</el-button>
</el-tooltip>

适用于不同情景

Top center

Bottom center

API

参数	说明	类型	可选值	默认值
effect	默认提供的样式	String	dark, light	dark
content	显示的内容	String
placement	出现位置	String	top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end	bottom
visible	初始状态是否可见	Boolean		false
disabled	控制是否不可见	Boolean		false
options	popper.js 的参数	Object	参考 popper.js 文档	{ boundariesElement: 'body' }