How to display tooltip on hover text using jQuery & Css

Hello readers,

Since this is my first post on Jquery let me describe you all what a Jquery is

jQuery is a fast, small, and feature-rich JavaScript library which makes HTML easier to create animations, handle events, develop Ajax applications,navigate a document, select DOM elements and more

This post is basically on how to add display hovertext on a webpage using Jquery.

On placing our cursor over an element on our webpage ,be it an image, a link or a text , a small magical text appears on the screen near the element. This is what a hovetext is.

Before proceeding  make sure you download jquery(.js) file from the following site: http://jquery.com/download/ and keep it in a folder.

I have placed my jquery.js file inside a folder called js where my html file is present.

 

HTML Code: hovertext.html


<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="divtext"></div>
<a class="texthover" href="http://www.simplifity.com/" hovertext="Welcome to Simplifity"/>Simplifity</a><br>
<img class="texthover" src="http://www.simplifity.com/wp-content/uploads/2014/12/cropped-app_icon.png" hovertext="Cool Fitness Android app"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hovertext.js"></script>

</body>
</html>

Jquery Code: hovertext.js


$(document).ready(function(){
$('.texthover').mousemove(function(event){
var hovertext=$(this).attr('hovertext');
$('#divtext').text(hovertext).show();
$('#divtext').css('top',event.clientY+5).css('left',event.clientY+5);
});
$('.texthover').mouseout(function(event){
$('#divtext').hide();
});
});

Css file : Style.css


#divtext {
position:absolute;
border:1px solid;
padding :5 px;
}

Explanation :

divtext – This div text acts as the hovertext which is hidden initially( using display:none in style.css file)

Whenever the cursor is moved over the link or image in the html page (both of which have the class name as “hovertext”), hover  text appears .

Hovertext is positioned to appropriate positions using clientX and clientY attributes of the mouseover event.

The Css I have used here is very simple. One can change according it to their needs.

If you have any queries please leave a comment below.

 

 

Latest posts by abirami vijayakumar (see all)

Leave a Reply

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