Simple jQuery Tooltip

Here's a super easy jQuery Tooltip snippet.

Customize the JavaScript and CSS to fit your needs!

JavaScript

Notice we're looking for the link titles.

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


$(document).ready(function(){
$('a').hover(function(e){
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').remove();
}).mousemove(function(e){
$('.tooltip').css('top', (e.pageY - 10) + 'px').css('left', (e.pageX + 20) + 'px');
});
});

CSS


.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

Full HTML




Demo: <a href="https://php.quicoto.com/simple-jquery-tooltip/">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.
2 comments
  • 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:


      $('.my-custom-class')...
      $('a, img, input')...

Leave a Reply

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

*
*