[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1160
  • Last Modified:

Creating an Agular JS directive for Tooltips

Hi,

I have a website that is mainly using angular JS and I need to create a directive to allow me to display tooltips on some of my html elements.
Can you assist in helping me create this?

Many thanks
0
Al4ddin2
Asked:
Al4ddin2
  • 4
1 Solution
 
leakim971PluritechnicianCommented:
it available with angular ui : http://angular-ui.github.io/bootstrap/#/tooltip
0
 
Pravin AsarPrincipal Systems EngineerCommented:
<span class="input-group-addon" title="{{yourtooltipVariable}}">XYZ</span>
0
 
Pravin AsarPrincipal Systems EngineerCommented:
leakim971

>> it available with angular ui : http://angular-ui.github.io/bootstrap/#/tooltip

This is a dead link?
0
 
Pravin AsarPrincipal Systems EngineerCommented:
Okay. Thanks for the update.
0
 
Pravin AsarPrincipal Systems EngineerCommented:
here is a working example.

<!DOCTYPE  HTML>
<html>
 <head>
 <script src="lib/angular-1.3.0/angular.js"></script>
<script type="text/javascript">
var myApp = angular.module("myApp", []);
myApp.controller("MyCtrl", function ($scope)
{
    $scope.items = [
                            { name: "item 01", tooltip: "This is item 01 tooltip!"},
                    { name: "item 02", tooltip: "This is item 02 tooltip!"},
                    { name: "item 03", tooltip: "This is item 03 tooltip!"},
                    { name: "item 04", tooltip: "This is item 04 tooltip!"},
                    { name: "item 05", tooltip: "This is item 05 tooltip!"}
                ];
});
myApp.directive('tooltip', function ()
      {
          return {
                      restrict:'A',
                      link: function(lscope, element, attrs)
                    {
                                if (element) {
                                   (element).attr('title',attrs.tooltip);
                                    attrs.$set('tooltip-placement', 'right');
                                    attrs.$set('tooltip-trigger', 'focus');
                                };
                    }
    };
}
);

</script>
</head>
 <body>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <li ng-repeat="item in items"  style="height:30px; font-size: 1.5em;">
            <a rel="tooltip" id="{{item.name}}" tooltip="{{item.tooltip}}" >{{item.name}}</a>
        </li>
    </div>
</div>
 </body>
</html>
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now