1

I am using Bootstrap tooltips on my page and I want to pass in text to the title attribute on it, using {{ }} but it doesn't work. Here's my HTML:

<a class="questionIcon" data-toggle="tooltip" data-placement="right" title="{{textBundle.tooltip-message}}">?</a>

I am initializing the tooltips in my controller like this:

$(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

However, when I hover over the ?, the message that is displayed is: {{textBundle.tooltip-message}} and not the actual content. Is there a way to get the dynamic content to be inputted using the standard Bootstrap tooltip?

Improve this question
2
  • Never, ever use jquery inside a controller. You should use: mgcrea.github.io/angular-strap Commented Jul 14, 2015 at 20:54
  • most likely bootstrap is storing the title before angular has a chance to compile. Your code needs to be inside a directive. Generally not a good idea to try to use page load frameworks/plugins on top of angular. Initialize them inside directives Commented Jul 14, 2015 at 20:55

1 Answer 1

Reset to default
1

Agree with the comments... never, ever use jquery inside a controller. And you should use a directive. For example, my directive is called "aiTooltip", and here is how it leverages angular strap (http://mgcrea.github.io/angular-strap/#)

plunkr: http://plnkr.co/edit/DIgj8vnZFyKFtX6CjDHi?p=preview (something is awry with the placement, but you get the idea)

In your template:

    <p class="link" ai-tooltip="{{ name }}">{{ name }}</p>

And in the directive we inject the $tooltip service provided by angular-strap:

app.directive('aiTooltip', function aiTooltipDirective($rootScope, $timeout, $tooltip) {
        return {
            restrict: 'A',
            scope: {
                aiTooltip: '@', // text to display in caption
            },
            link: function aiTooltipLink(scope, elem, attrs) {
                var tooltip;

                $timeout(function() {
                    tooltip = $tooltip(elem, {
                        title: scope.aiTooltip,
                        html: true,
                        trigger: scope.aiTooltipTrigger|| 'hover',
                        placement: scope.aiTooltipPlacement || 'top',
                        container: scope.aiTooltipContainer || 'body'
                    });
                });
            }
        };
    });

And in the $scope of the template we pass in a scope variable called name

$scope.name = 'Foobar';
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.