How to show a hint when freezing?

Question

I defined the boot prompt as follows:

<button popover-template="myPopoverTemplate.html" data-trigger="hover" popover-title="{{dynamicPopover.title}}" class="btn btn-default">Popover With Template</button> 

my template is as follows:

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

Is the problem that the tooltip is not displayed on hover?

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

Answer 1

@Leeuwtje, in the plunkr link that you attach, there is a popover that opens on the mouseenter event (when you hover over the button).

The attribute for this is not data-trigger="hover" , but popover-trigger="mouseenter" .

In addition, for the template popover-template="dynamicPopover.templateUrl" added as an attribute to the element that launches it.

Also, if you need an attribute prefix using data- , follow these steps:

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

popover with the prefix -template or -trigger in popover-trigger and popover-template makes it an angular ui directive, so removing popover- will make it invalid / meaningless for angular ui.

EDIT

The reason popover-template does not work is because it expects a variable as an attribute value.

Replacement:

 popover-template="myPopovertemplate.html" 

by

 popover-template="'myPopovertemplate.html'" 

Adding the file name in quotation marks does the trick.

We put the url pattern in single quotes so that it becomes a valid variable. This is why the other buttons on the page are in the plunk function, because they have the value popover-template as variables that are defined in $scope .

PLUNK : http://plnkr.co/edit/oEA5ekXDV5DSw6yoSHMd?p=preview

Hope this helps!