I am using Element Popover component (https://element.eleme.io/#/en-US/component/popover) with Vue.js. The popover is working and I am able to display text content.
<el-popover
placement="bottom"
title="Title"
width="200"
trigger="click"
content="this is content, this is content, this is content"
>
<el-button type="primary" slot="reference" circle style="background-color:white;border-color:white" >
<img src="img/if_Help_1493288.png" alt="Help" height="42" width="42">
</el-button>
</el-popover>
Is it possible to show regular html elements, e.g. <br>, <strong> or <img>
in the popover content?
As mentioned in attributes description of popover component - content be passed through content
prop as string or as a default slot.
So any content will be passed as a default
slot, if no slot name is specified. Here is an example for your case:
<el-popover
placement="bottom"
title="Title"
width="200"
trigger="click"
>
<el-button type="primary" slot="reference" circle style="background-color:white;border-color:white" >
<img src="img/if_Help_1493288.png" alt="Help" height="42" width="42">
</el-button>
<div>
this is content, <br> <strong>this is content</strong>, <br> this is content
</div>
</el-popover>
Note that content
prop will be replaced with content of default slot if it is passed. Can't use them both at the same time.