?
Solved

Creating an Agular JS directive for Tooltips

Posted on 2014-10-01
6
Medium Priority
?
1,132 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
[X]
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
  • 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 29

Expert Comment

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

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 29

Expert Comment

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

Accepted Solution

by:
Pravin Asar earned 2000 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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

718 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