el-tooltip
特定: 超出边界元素，自动切的方向
属性
append-to-body 作用:tooltip是否插入到body中. 类型:boolean, 默认:true
该属性默认为true, 如果为true, 则tooltip默认插入到body元素中 设置为false, 则需要使用append方法手动插入. 如:
<script>
export default {
name: 'App',
data() {
return {}
},
created() {
this.$message('这是一条消息提示')
},
mounted() {
console.log('this.$refs.elTooltip', this.$refs.elTooltip)
// 因为将append-to-body设置成了false, 所以需要手动插入
this.$refs.comp.appendChild(this.$refs.elTooltip.popperVM.$el)
},
}
</script>
<template>
<div ref="comp">
<h3>Hello Vue 2 + Vite</h3>
<el-button type="primary">按钮</el-button>
<el-tooltip ref="elTooltip" :append-to-body="false" class="item" effect="light" placement="top">
<el-button>上边</el-button>
<div slot="content" class="tooltipContainer">
<div v-for="(item, index) in 100" :key="index">{{ item }}-这是内容</div>
</div>
</el-tooltip>
</div>
</template>
<style lang="scss">
.tooltipContainer {
max-height: 200px;
overflow: auto;
}
</style>
popperOptions.boundariesElement 默认: 为'body', 可选值: view, html, HtmlElement元素
表示tooltip的边界元素.
如:
- 将
placement="top", 并将popperOptions.boundariesElement设置为一个Html元素， 则表示:tooltip的最顶部不会超过popperOptions.boundariesElement元素的顶部 - 将
placement="bottom", 并将popperOptions.boundariesElement设置为一个Html元素， 则表示:tooltip的最底部不会超过popperOptions.boundariesElement元素的顶部
<script>
export default {
name: 'App',
data() {
return {
popperOptions: { boundariesElement: this.$refs.comp, gpuAcceleration: true },
}
},
created() {
this.$message('这是一条消息提示')
},
mounted() {
console.log('this.$refs.elTooltip', this.$refs.elTooltip)
this.popperOptions = {
...this.popperOptions,
boundariesElement: this.$refs.comp,
}
},
}
</script>
<template>
<div ref="comp" class="comp">
<h3>Hello Vue 2 + Vite</h3>
<el-button type="primary">按钮</el-button>
<el-tooltip
ref="elTooltip"
class="item"
effect="light"
placement="top"
:popper-options="popperOptions">
<el-button>上边</el-button>
<div slot="content" class="tooltipContainer">
<div v-for="(item, index) in 100" :key="index">{{ item }}-这是内容</div>
</div>
</el-tooltip>
</div>
</template>
<style lang="scss">
.tooltipContainer {
max-height: 200px;
overflow: auto;
}
.comp {
width: 300px;
height: 200px;
background: lightblue;
margin-top: 300px;
}
</style>
offset: 对tooltip的位置进行调整，类型:number, 当:placement="left"时, 设置offset表示调整上,下位置， 当:placement="right"时, 设置offset表示调整左,右位置。 其他依此类推
popper-class: 给tooltip加一个class, 可以用于修改tooltip样式，或者用于在placement原始位置的基础上，对tooltip的位置进行调整
调整位置的例子:
<script>
export default {
name: 'App',
data() {
return {}
},
created() {
this.$message('这是一条消息提示')
},
mounted() {
console.log('this.$refs.elTooltip', this.$refs.elTooltip)
},
}
</script>
<template>
<div ref="comp" class="comp">
<h3>Hello Vue 2 + Vite</h3>
<el-button type="primary">按钮</el-button>
<el-tooltip ref="elTooltip" effect="light" placement="top" popper-class="myTooltip">
<el-button>上边</el-button>
<div slot="content" class="tooltipContainer">
<div v-for="(item, index) in 100" :key="index">{{ item }}-这是内容</div>
</div>
</el-tooltip>
</div>
</template>
<style lang="scss">
.tooltipContainer {
max-height: 200px;
overflow: auto;
}
.comp {
width: 300px;
height: 200px;
background: lightblue;
margin-top: 300px;
}
.myTooltip {
// 这里用来在placement位置的基础上，调整tooltip位置，注意必须加: !important 才会生效
top: 200px !important;
}
</style>
实际位置的计算逻辑详见: node_modules/element-ui/src/utils/popper.js的update, getOuterSizes, _getOffsets, getOffsetRectRelativeToCustomParent方法
方法
updatePopper: 这个是vue-poper.js的内部方法， 可以用于重新计算tooltip的位置.
<el-popover
ref="dcPopover"
placement="left"
width="797"
trigger="hover"
:popper-options="{ boundariesElement: 'viewport', removeOnDestroy: true }"
@show="handleShow(scope)"
:open-delay="300"
>
<button>按钮</button>
</el-popover>
this.$nextTick(()=>{
this.$refs.dcPopover.updatePopper()
})
参考文章
完全满足需求，轻量级 tooltips 提示插件：popper.js
elementui将tooltip和dropdown显示到指定dom而非body根节点
