Angularjs: Directive With Bootstrap Tooltip

Question

Hey guys want to create a new directive that when you have any tag with attribute bt-tooltip=”your message goes here” it should add bootstrap tooltip to the element. The tooltip message should have a !!! at the end of message.

(e.g. This is a paragraph

should show a tooltip with message “This is a tooltip!!!”

or

List item should show a tooltip with message “Second tooltip!!!”)

I can easily add tooltip via bootstrap but want to add it like description above.especialy the part that you get the input from attribute like this <p bt-tooltip=”This is a tooltip”>

Right now my angular code looks like this

 app.directive("bttooltip", function() {
      return {
          template : "<p>Made by a directive!<p>"

     };
 });

What should i do?

I still recommend using UI Bootstrap, but I've updated my answer to show how you can use a directive if you prefer. It requires jQuery (as opposed to the jqLite included with Angular). — Lex
– Lex, Commented Jun 8, 2016 at 22:08

Lex · Accepted Answer · 2016-06-08 22:07:00Z

2

There's a much easier way to use bootstrap stuff with Angular: UI Bootstrap, written by the Angular team and allows the use of bootstrap as directives - no jQuery (besides the minimal version included with Angular) required. Once you set a script reference to the Angular UI library (be sure to use the "tpls" version to get all the styled templates) and a reference to the boostrap CSS you can do this:

angular.module('app', ['ui.bootstrap'])
.controller('mainController', function(){
    var _this = this;
    _this.toolTip = 'Here is a sample tooltip';
})

<div ng-app="app" ng-controller="mainController as main" style="padding: 100px;">
    <button uib-tooltip="{{main.toolTip}}!!!">
    Button with a Tooltip
    </button>
</div>

Here's a JSFiddle demonstrating the above.

Update

If you still want to use your directive, try changing it to this:

app.directive("btTooltip", function($timeout) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            $timeout(function() {
                $(element).data("title", attrs.btTooltip + "!!!");
                // set other options via data or use an options object
                $(element).tooltip();
            });
        }
    }
}

edited Jun 8, 2016 at 22:07

answered Jun 8, 2016 at 20:10

Lex

7,2732 gold badges31 silver badges49 bronze badges

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

1 Comment

Mojtaba Over a year ago

Thank you.i will try it.it would be better for other people if you replace new answer with the old fiddle.

Community · Accepted Answer · 2017-05-23 10:28:59Z

0

You can add

element.append("<div ng-include='\"" + templateUrl + "\"'></div>");

check this link

edited May 23, 2017 at 10:28

CommunityBot

11 silver badge

answered Jun 8, 2016 at 20:06

riteshmeher

8748 silver badges16 bronze badges

1 Comment

Mojtaba Over a year ago

i don't want to include a template.just a simple attribute.

Collectives™ on Stack Overflow

Angularjs: Directive With Bootstrap Tooltip

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related