Solved

Creating an Agular JS directive for Tooltips

Posted on 2014-10-01
6
1,082 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 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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
need help with share buttons 11 66
Triple line in an alert message 4 19
Jquery 7 29
Validating number not work with decimal 4 23
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

735 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