Bootstrap 3 Tooltips with Angular

Question

I'm attempting to use Boostrap 3 tooltips with Angular JS so that the tooltip displays the value of an object in the Angular scope. This works fine when the page loads, but when the value of the object in the scope is updated the tooltip still displays the original value.

HTML:

<div ng-app>
<div ng-controller="TodoCtrl">
    <span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>
    <button type="button" ng-click="changeName()">Change</button>
</div>

Javascript:

function TodoCtrl($scope) {
    $scope.name = 'Ian';
    $scope.changeName = function () {
        $scope.name = 'Alan';
    }
}

$(document).ready(function () {
    $('span').tooltip();
});

There's an example demonstrating my code so far and the issue in this Fiddle

Possible duplicate of [Using Bootstrap Tooltip with AngularJS](http://stackoverflow.com/questions/20666900/using-bootstrap-tooltip-with-angularjs) — CSchulz, Jul 28 '16 at 09:09

score 16 · Accepted Answer · answered Apr 23 '14 at 10:54

16

Instead of:

<span data-toggle="tooltip" data-placement="bottom" title="{{name}}">Hello {{name}}</span>

Use:

<span data-toggle="tooltip" data-placement="bottom" data-original-title="{{name}}">Hello {{name}}</span>

Bootstrap Tooltip first checks data-original-title, so as long as you keep this value updated, you'll be fine. Check out this working Fiddle

answered Apr 23 '14 at 10:54

T.M.

3,111
1
18
15

@stride It was your code that gave me a hint. I went to check what Bootstrap does with "data-original-title" after that :) – T.M. Apr 23 '14 at 11:05
Thank you so much saved my time – Yassin Mokni May 16 '17 at 18:16

stride · Answer 2 · 2014-04-23T10:50:18.133

My guess is that it is missing an apply for changed values, so angular knows nothing about that and does not update. I recommend angular ui bootstrap instead of raw bootstrap components for this reason.

http://angular-ui.github.io/bootstrap/

This way there is no need for jquery which is a bonus in my book.

EDIT: try this in change handler for a quick and dirty workaround:

$('span').tooltip('hide')
      .attr('data-original-title', $scope.name)
      .tooltip('fixTitle');

But as i said, check out angular version as this hack has several issues....

score 0 · Answer 3 · answered Dec 21 '22 at 10:22

0

For Latest Angular Versions Use: [attr.data-original-title]="dynamicTooltipMsg"

<button 
data-toggle="tooltip"     
[data-title]="dynamicTooltipMsg" 
[attr.data-original-title]="dynamicTooltipMsg">
    Testing
</button>

answered Dec 21 '22 at 10:22

LearningIsNever EndingProcess

181
1
5

Bootstrap 3 Tooltips with Angular

3 Answers3