How to create a custom tooltip using Directive in AngularJS?
Today our target is to create a tooltip which is visible on mouseover an HTML element.
We would utilize “Directive” methodology of Angular JS in achieving this.
Incase You like our tutorial, please help us to share it with others, do like our FB page or Subscribe to Twitter updates.
What is a Directive?
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.
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.
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.
|JS for ToolTip|
|Result of Mouse Hover|