尝试在我的 svg 图标悬停时显示弹出框。<el-popover> 标记不起作用

Question

我试图在悬停 svg 图标时显示弹出框。但是标签不起作用.为什么？它是一个 vue js 代码。

这是我的代码

<el-popover
placement="top-start"
title="Title"
width="200"
trigger="hover"
content="hiiiiii">
<svg-icon  icon-class="bed" class="tx-60 " style="width: 1em;height:1em;                                            
aria-hidden="true" aria-describedby="el-popover" tabindex="0"></svg-icon>
</el-popover>   

Answer 1

use slot="reference">

在 SVG 图标标签中使用 slot="reference">

var Main = {
data() {
return {};
}
};
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

@import url("//unpkg.com/element-ui@2.15.0/lib/theme-chalk/index.css");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.0/lib/index.js"></script>
<div id="app">
<el-popover placement="top-start" title="Title" width="200" trigger="hover" content="hiiiiii">
<el-button slot="reference" type="text" icon="el-icon-edit" class="floatright"> </el-button>
</el-popover>
</div>