angularjs - how to show tooltip when hovering? -

i defined bootstrap tooltip this:

 <button popover-template="mypopovertemplate.html" data-trigger="hover" popover-title="{{dynamicpopover.title}}" class="btn btn-default">popover template</button> 

my template looks this:

<div>{{dynamicpopover.content}}</div> <div class="form-group">   <label>popup title:</label>   <input type="text" ng-model="dynamicpopover.title" class="form-control"> </div> 

problem tooltip not showup on hover?

plunkr ref:http://plnkr.co/edit/g1cet74mvckvyvdxrxnx?p=preview

@leeuwtje, in plunkr reference have attached, there popover opening on mouseenter event (when hover mouse on button).

the attribute not data-trigger="hover", popover-trigger="mouseenter".

also, template popover-template="dynamicpopover.templateurl" added attribute element triggers it.

also, if need prefix attributes data-, them this:

<button data-popover-template="" data-popover-trigger="" /></button> 

the popover prefixed -template or -trigger in popover-trigger , popover-template makes angular ui directive, removing popover- make invalid / meaningless angular ui.

edit

the reason popover-template did not work because expects variable attribute value.

replacing :

popover-template="mypopovertemplate.html" 

by

popover-template="'mypopovertemplate.html'" 

adding filename in quotes trick.

we put template url in single quotes becomes valid variable. why other buttons on page in plunk function, because have popover-template value variables defined in $scope.

plunk : http://plnkr.co/edit/oea5ekxdv5dsw6yoshmd?p=preview

hope helped!