How to add angularjs ui bootstrap tooltips dynamically to existing markup?

Question

Relatively new to angularjs. Help me understand what\'s going on here!

What I\'m ultimately trying to accomplish: Given a block of text in my html (say in a paragraph e

Answer 1

EDIT:

I think I misunderstood your requirement a bit. Especially after noticing that you use ui-boostrap angular module already.

Problem here, I would think, is that the new attributes you attach are not compiled by Angular, hence the tooltip directive is never run. You need to run the newly attached HTML/DOM through $compile(element)(scope).

Directive example. Please note that this isn't complete, treat it more as pseudocode than anything else, but it should serve as a guideline for how to do it. Basically, you can use whatever jQuery you want inside the directive, important thing to note is that the 'elem' you get in the link function is the same element which the directive is bound to. Also, you need to call $compile(your_element)(scope) on any HTML/DOM you create and attach yourself.

This is my tooltip the_tag test
 


myApp.directive('tooltipTag', ['$compile', function($compile) {
    return {
        scope: {
            text: '@' // Create isolate scope as this is a reusable component, we don't want to clutter parent scope
        },
        link: function(scope, elem, attrs) {
            // Elem is here the 
 element, as jqLite/jQuery element.
            // Put whatever logic you want here, feel free to use jQuery if you want
            // I guess you want to copy out the text, search for 'the_tag' (which you can find in 'attrs.tooltipTag') in the text inside the 
 and then replace the content.
            // Replace content elem.                
            elem.html(replaced_html);  // Contains text with the_tag replaced with the_tag
            var to_compile = elem.children('a');
            // Finally, compile and attach to scope with
            $compile(to_compile)(scope);
        }

    }

}])

This is probably a naive approach, but I don't fully know your requirements. But it should give you an idea of a possible way to solve this.

---

I think you are approaching the problem the wrong way. There is a general rule when using angular, which is: If you're modifying the DOM, you (almost always) need a directive.

So, what's going wrong here?

I'm not too familiar with Bootstrap's tooltip implementation, but I would assume it never picks up the newly added 'tooltip' attributes. I believe the reason it works in the first example is that tooltip related code search the DOM for tooltip attributes upon page load, but adding it after that is a no go (please correct me if I'm wrong).

So, how can you fix this?

I believe you want to add tooltips dynamically somehow? I think angular-ui bootstrap already have directives supporting this, e.g. ui-tooltip="{{variable.on.scope}}". See link further down.

Or, if you need something else, you have to create your own directive. Directives might be scary at first, but they're (in my opinion) the most important feature of Angular and pretty simple to use once you get the hang of it.

Essentially, when creating a new directive, you can pass in data defining the text you want in the tooltip. Inside the link(scope, elem, attrs) function in your directive, you can attach a tooltip (using Bootstrap's elem.tooltip() function) to the 'elem', being the element the directive applies to.

If you need to attach the element as well, you can use transclusion, which is a bit more advanced.

If you're not familiar with directives, please read up on it and ask if you need further help. Or just check out angular-ui-bootstrap (there are versions for both Bootstrap 3 and 2): http://angular-ui.github.io/bootstrap/