Solved

Creating an Agular JS directive for Tooltips

Posted on 2014-10-01
6
1,012 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
Comment Utility
it available with angular ui : http://angular-ui.github.io/bootstrap/#/tooltip
0
 
LVL 28

Expert Comment

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

Expert Comment

by:Pravin Asar
Comment Utility
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
Comment Utility
Okay. Thanks for the update.
0
 
LVL 28

Accepted Solution

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

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will learn how to dynamically set the form action using jQuery.

763 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now