Bootstrap 4 Popover with HTML Content

Remember to set data-html="true" (along with the other data- attributes) on the popover element. Otherwise HTML content won't be rendered correctly.

More details can be found in the docs for Bootstrap: https://getbootstrap.com/docs/4.6/components/popovers/#options


Just wrap the popover class in single quotes like this.

<div class='popover'>text text</div>

instead of

<div class="popover">text text</div>

$element.popover({
    animation: false,
    html: true,
    sanitize: false,
    placement: 'bottom',
    trigger: 'manual',
    content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>',
});