CODEWITHSUNDEEP
cssangularjstwitter-bootstrap
Mojtaba
Mojtaba

Reputation: 743

Angularjs: Directive With Bootstrap Tooltip

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?

Upvotes: 0

Views: 2328

Answers (2)

Lex
Lex

Reputation: 7194

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();
            });
        }
    }
}

Upvotes: 2

riteshmeher
riteshmeher

Reputation: 874

You can add 

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

check this link

Upvotes: 0

Related Questions