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: 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

<link rel="stylesheet" type="text/css" href="style.css">
<div id="divtext"></div>
<a class="texthover" href="" hovertext="Welcome to Simplifity"/>Simplifity</a><br>
<img class="texthover" src="" hovertext="Cool Fitness Android app"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/hovertext.js"></script>


Jquery Code: hovertext.js

var hovertext=$(this).attr('hovertext');

Css file : Style.css

#divtext {
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 *