Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Creating an Agular JS directive for Tooltips

Posted on 2014-10-01
6
1,070 Views
Last Modified: 2014-10-16
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
Comment
Question by:Al4ddin2
  • 4
6 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40354281
it available with angular ui : http://angular-ui.github.io/bootstrap/#/tooltip
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40354352
<span class="input-group-addon" title="{{yourtooltipVariable}}">XYZ</span>
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40354358
leakim971

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

This is a dead link?
0
 
LVL 28

Expert Comment

by:Pravin Asar
ID: 40355084
Okay. Thanks for the update.
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 40355270
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question