add bootstrap.ui tooltip dynamically in my custom directive

Question

I can add tooltip to my html elements using the bootstrap.ui directive tooltip e.g content works.

I am however creating my own attribute directive for inline editing. the directive looks something like this in use:

<h4 ng-bind="model.fieldName" type="text" style="display: inline" edit-on-click="model.fieldName" save="saveFieldName"></h4>

My directive edit-on-click simply adds an onclick function that places an input box and sets the ng-model to the same name as in edit-on-click. When the user presses enter or blurs the field the save method is called. This works perfectly and there is a lot of other directives doing the same thing.

I do however want to also add a tooltip to the existing tag on mouseenter to make it visible that this field is editable.

I've tried several things, like adding the tooltip attribute in the link function and also tried adding it in the compile function, but angular does not process the attribute as a directive. How can I make angular see that there is a new directive on the existing tag?

I do not want to add a tooltip to the original html tag, as this should be a part of the directive.

My directive looks something like this

directive("editOnClick", function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, iElement, iAttrs, controller) {
                var inputC = $compile("<input type='" + iAttrs.type + "' ng-model='" + iAttrs.editOnClick + "'>")(scope);
                var input = inputC.eq(0);
                var oldDisplay, saveFunc = iAttrs.save;
                input.blur(function (evt) {
                    if (saveFunc && scope[saveFunc]) {
                        scope[saveFunc](function () {
                            input.css("display", "none");
                            iElement.css("display", oldDisplay);
                        });
                    }
                });
                iElement.after(input);
                iElement.click(function () {
                    oldDisplay = iElement.css("display");
                    iElement.css("display", "none");
                    input.css("display", "block")
                    input.click();
                    input.keyup(function (evt) {
                        if (evt.keyCode === 13) {
                            input.blur();
                        }
                    });
                });
            }
    }
})

So I can easily add an attribute to the iElement, but I need to tell angular to parse it as a directive in order to get the tooltip.

Hi, No I went with another path like others do inline editing. But I would really like to find out how to tell angular to parse the attrs on dynamically created elements, since I think that may come in handy some other time. — Tommy
– Tommy, Commented Sep 26, 2013 at 18:59

mengstrom · Accepted Answer · 2013-11-13 16:04:33Z

2

If I understood your question correclty try this.

compile: function() {
    return {
    pre: function precompile(scope, element, attrs) {
        if(angular.isUndefined(element.attr('tooltip'))) {
            element.attr('tooltip', 'Click to edit');
            $compile(element)(scope);
        }
    }
};
}

The if-statement is needed else it would get stuck in an infinite loop.

edited Nov 13, 2013 at 16:04

answered Nov 13, 2013 at 15:56

mengstrom

2333 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

add bootstrap.ui tooltip dynamically in my custom directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related