Tooltip that follows cursor using Directive in AngularJS – User friendly Tech help
How to create a custom tooltip using Directive in AngularJS?
n
Scenario: –
n
Today our target is to create a tooltip which is visible on mouseover an HTML element.
n
Approach: –
n
We would utilize “Directive” methodology of Angular JS in achieving this.
n
Incase You like our tutorial, please help us to share it with others, do like our FB page or Subscribe to Twitter updates.
n
What is a Directive?
n
A Directive is a marker on a DOM Element (such as an attribute, element name, comment or CSS class) that tells Angular to execute or refer some JavaScript code. Directives, get run when the DOM is compiled by the compiler.
n
We can write directives that update or even create totally new behavior in HTML. By default, a directive is a function that is run on every element with a particular attribute. This function takes as parameters the associated element and the AngularJS scope that this element is in.
n
In case anyone have worked in AngularJS, you must be already using some directives, knowingly or unknowingly. The ng-app attribute is a directive, so is ng-controller and all of the ng- prefixed attributes.
n
Sorry this post is not targeted on Directive explanation, so we are not adding much on this topic, we will write on this in our coming AngularJS tutorials.
n
Code:-
n
n
HTML:-
n
 |
| HTML code |
n
CSS:-
n
 |
| CSS code |
n
JavaScript:-
n
 |
| JS for ToolTip |
n
Output:-
n
 |
| Result of Mouse Hover |
n
