Popup at the button click

You can add any html element inside the popper container

Here is an example with Bootstrap
http://jsfiddle.net/lenamtl/qpv0huy4/


you can use something like this

$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>',
    });

Select allOpen in new window

Using tippy you can add content https://atomiks.github.io/tippyjs/#html-content

Thanks for your help. Here is the code that i started implementing in my application but doesn't seem to work.

    <button popover-template="'popover.html'"
                popover-placement="top"
                popover-trigger="click"
                type="button"
                class="btn btn-default">Mouse over me</button>

Select allOpen in new window

I have included 'ngAnimate' & 'ui.bootstrap' as dependencies in my AngularJS application. I also included following js file on the page that includes ng-app directive

       

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-animate.js"></script> 

Select allOpen in new window

It doesn't create any error message but popup doesn't show.

Hi,

You cannot display .html page like this with a url

popover-template="'popover.html'"

Select allOpen in new window

or please refer to the script you are using...

You need to put the HTML into data-content

<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="<b>Example popover</b> - title" 
   data-content="<div><b>Example popover</b> - content</div>">Example popover</a>

Select allOpen in new window

https://getbootstrap.com/docs/4.1/components/popovers/#example

or
You need to put the HTML into content

$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>',
    });

Select allOpen in new window

I was able to successfully display html page in a test application but when i do the same in the current application nothing seems to work. The reason i included  code in a separate file is because i have lot of html code that needs to be displayed in popover & felt template is a better option as it makes the code readable.

I used data-content instead of popover-template as suggested by lenamtl