Simple jQuery Tooltip

Here's a super easy jQuery Tooltip snippet.

Customize the JavaScript and CSS to fit your needs!


Notice we're looking for the link titles.

You could change it to look for a specific class or html tag.

var titleText = $(this).attr('title');
$(this).data('tiptext', titleText).removeAttr('title');

').text(titleText).appendTo('body').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px').fadeIn('slow');
}, function(){
$(this).attr('title', $(this).data('tiptext'));
$('.tooltip').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px');


.tooltip {
display: none;
position: absolute;
padding: 10px;
color: black;
background-color: red;
border: 1px solid black;
box-shadow: 0 1px 3px 1px rgba(0,0,0,0.5);
border-radius: 3px;

View Demo


Demo: <a href="">Simple jQuery Tooltip</a> | Codeground

Hover me!

View Demo

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.
  • Hi,
    How do I apply its tooltip solution to more than one element?
    For example, for images, inputs and other elements that may receive the title attribute.

    • Hello,

      As you can see in the code, we’re using a jQuery selector for “a” (links). From the example:

      $('a').hover(function(e){ ....

      Instead, use any selector you might need:

      $('a, img, input')...

Leave a Reply

Add <code> Some Code </code> by using this tags.