JQuery hover tool for freezing

Question

I need a very lightweight tooltip like 1 found here http://www.history.com/videos , when you hover a video link in the "Popular Videos" section, the tooltip disappears in place, it stays there, and you can even select the text on it until you move the cursor from it. Facebook and Google+ also have a similar style as well as stackoverflow when you hover over a tag. Can anyone give an easy way to do this.

I have a search and browse for many existing "plugins", they are all somewhat bloated. Thanks for any help

Answer 1

Here is a pretty simple way to do this:

var timeout; function hide() { timeout = setTimeout(function () { $("#tooltip").hide('fast'); }, 500); }; $("#tip").mouseover(function () { clearTimeout(timeout); $("#tooltip").stop().show('fast'); }).mouseout(hide); $("#tooltip").mouseover(function () { clearTimeout(timeout); }).mouseout(hide); 

Where #tip is the element you want to #tip mouse over so that the tooltip appears, and #tooltip is the actual tooltip.

Here is an example: http://jsfiddle.net/pvyhY/

---

If you want to wrap this in a jQuery plugin:

 (function($) { $.fn.tooltip = function(tooltipEl) { var $tooltipEl = $(tooltipEl); return this.each(function() { var $this = $(this); var hide = function () { var timeout = setTimeout(function () { $tooltipEl.hide(); }, 500); $this.data("tooltip.timeout", timeout); }; /* Bind an event handler to 'hover' (mouseover/mouseout): */ $this.hover(function () { clearTimeout($this.data("tooltip.timeout")); $tooltipEl.show(); }, hide); /* If the user is hovering over the tooltip div, cancel the timeout: */ $tooltipEl.hover(function () { clearTimeout($this.data("tooltip.timeout")); }, hide); }); }; })(jQuery); 

Using:

 $(document).ready(function() { $("#tip").tooltip("#tooltip"); }); 

Add more functionality and you end up with a great qTip plugin , which I also recommend taking a look at.

Answer 2

Here's another Facebook-style hint using a jQuery plugin called Tiptip. The following is a complete working example. The Tiptip download link is also provided in the link below.

http://kahimyang.info/kauswagan/HowtoBlogs.xhtml?b=527

This was written for the JSF / PrimeFaces audience. Just replace the links to "jQuery" with "$". This is the use of the built-in PrimeFaces jQuery. For non PrimeFaces users, you need to download jQuery before tiptip comes in.