<template>
<el-button
ref="buttonRef"
v-click-outside:[popperPaneRef]="onClickOutside"
@click="visible=true"
>Click me</el-button>
<el-popover
ref="tooltipRef"
:virtual-ref="buttonRef"
v-model:visible="visible"
title="With title"
virtual-triggering>
<el-button
type="primary"
link
@click.stop="visible = false"
> Some content </el-button>
</el-popover>
</template>
<script setup>
import {computed, ref} from 'vue'
import {ClickOutside as vClickOutside} from 'element-plus'
const buttonRef = ref()
const tooltipRef = ref()
const visible = ref(false)
const popperPaneRef = computed(() => {
return tooltipRef.value?.popperRef?.contentRef
})
const onClickOutside = () => {
visible.value = false
}
</script>