Adding custom tooltip on mouseover using Angular

Show custom tooltip for anchor or link on mouseover using angular.

 Angular   
 

Posted: March 29, 2017. | By: mustafa

Adding custom tooltip on mouseover in Angular.

In this article I will show you how to add custom tooltip on anchor using angular. Custom tooltip may be added to show more description on hover or complete page having images as you wish.

Now lets add jquery function to show & hide tooltip and a function to catch mouse event to position the tooltip.

$scope.showTooltip = function () {
 $('div#pop-up').show();
 }

$scope.hideToolTip = function () {
 $('div#pop-up').hide();
 }

$scope.posTooltip = function ($event) {
 var offset = $(".form-horizontal").offset();

var moveLeft = 20;
var moveDown = 50;


 var divPos = {
 left: $event.pageX - offset.left,
 top: $event.pageY - offset.top,
 height: $event.clientHeight,
 width: $event.clientWidth,
 eTop: offset.top,

};

$scope.readMoreDescription = $event.currentTarget.getAttribute("data-description");
 $("div#pop-up").css('top', divPos.top + moveDown).css('left', divPos.left + moveLeft);
 }

 

The showTooltip() will make tooltip visible and posTooltip() we pass $event object to get data-description attribute to show the selected item description.
And also selected link offset value to position the custom tooltip by setting top and left css values.
On mouseout call hideToolTip() to make tooltip visible false.

Add html ul li list of items including span having ng-show attribute displaying item title and anchor is used to bind
data-description attribute and passing $event on mousemove using angular ng-mousemove.

<ul ng-repeat="item in items">
<li>
<span ng-show="item.Id != ''">{{item.Title}}
 <a href="#" class="trigger" data-description="{{item.ItemDesc}}" ng-mouseenter="showTooltip()" ng-mouseleave="hideToolTip()" ng-mousemove="posTooltip($event)">read more</a>
 </span>
 </li>
 </ul>
 

Lastly add pop-up div to show tooltip on hover. Apply any css styles to make tooltip more attractive.

<div id="pop-up">
 <p>{{readMoreDescription}}</p>
 </div>

related posts

Back to top