How can I display a popup when hover using jQuery?

Question

As the title says, how can I display a tooltip on hover with jQuery?

Answer 1

I suggest qTip .

Answer 2

The hint plugin may be too heavy for what you need. Just set the "title" attribute with the text you want to show in your tooltip.

$("#yourElement").attr('title', 'This is the hover-over text'); 

Answer 3

take a look at the jQuery plugin hints . You can pass an options object for different parameters.

There are other alternative plugins for tooltips, of which several are

• Random.Next () jQuery AJAX tooltip

• AJAX tooltip for dhtml

• clueTip

Take a look at the demos and documentation and please update your question if you have specific questions about how to use them in your code.

Answer 4

The following will work like a charm (if you have div / span / table / tr / td / etc with "id"="myId" )

  $("#myId").hover(function() { $(this).css('cursor','pointer').attr('title', 'This is a hover text.'); }, function() { $(this).css('cursor','auto'); }); 

As a freeware, .css('cursor','pointer') will change the mouse pointer to freeze.

Answer 5

As recommended by qTip and other projects are quite old, I recommend using qTip2 as it is the most advanced.

Answer 6

You can use bootstrap tooltip . Remember to initialize it.

 <span class="tooltip-r" data-toggle="tooltip" data-placement="left" title="Explanation"> inside span </span> 

Explanation will be displayed on the left side.

and run it with js:

 $('.tooltip-r').tooltip(); 

Answer 7

Take a look at ToolTipster

• easy to use
• flexible
• pretty lightweight compared to some other tooltip plugins (39kB)
• looks better without extra style
• has a good set of predefined themes.

Answer 8

 <a class="tooltips"> Hover Me <span>My Tooltip Text</span> </a> <style> a.tooltips { position: relative; display: inline; } a.tooltips span { position: absolute; width: 200px; color: #FFFFFF; background: #000000; height: 30px; line-height: 30px; text-align: center; visibility: hidden; border-radius: 6px; } a.tooltips span:after { content: ''; position: absolute; top: 100%; left: 35%; margin-left: -8px; width: 0; height: 0; border-top: 8px solid #000000; border-right: 8px solid transparent; border-left: 8px solid transparent; } a:hover.tooltips span { visibility: visible; opacity: 0.8; bottom: 30px; left: 50%; margin-left: -76px; z-index: 999; } </style>