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?

Answer 1

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

Answer 2

You can add

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

check this link