Tooltip that follows cursor using Directive in AngularJS

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.

Approach: – 
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?
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.

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.


HTML code for Tooltip Angularjs
HTML code

CSS for ToolTip AngualrJS
CSS code

Directive for ToolTip
JS for ToolTip


ToolTip AngularJS Result
Result of Mouse Hover 

More scenarios on AngularJs

3 replies on “Tooltip that follows cursor using Directive in AngularJS”

Leave a Reply

Your email address will not be published. Required fields are marked *