how to show tooltip when hovering?

Question

I defined my bootstrap tooltip like this:

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

my template looks like 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 is the tooltip does not showup on hover?

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

Answer 1

@Leeuwtje, in the plunkr reference that you have attached, there is a popover that is opening on mouseenter event (when you hover the mouse over the button).

The attribute to do that is not data-trigger="hover", but popover-trigger="mouseenter".

Also, for the template popover-template="dynamicPopover.templateUrl" is added as an attribute to the element that triggers it.

Also, if you need to prefix the attributes with data-, do them like this:

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

The popover prefixed to -template or -trigger in popover-trigger and popover-template makes it an angular ui directive, so removing popover- would make it invalid / meaningless to angular ui.

EDIT

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

Replacing :

popover-template="myPopovertemplate.html"

by

popover-template="'myPopovertemplate.html'"

Adding the filename in quotes does the trick.

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

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

Hope this helped!