Search code examples
javascriptjquerytooltipmouseover

Looking for a mouseover feature like stackoverflow

I love the hover effects of StackOverflow.

enter image description here

I want to use similar feature in my web-application. Can somebody let me know about it? What this feature is called? Is there any library available for this? I've used jQuery Tooltip but I was not impressed with that one.

Currently I'm using overLib in my application which is pretty old.

Edit: Impressed doesn't sound good here, I just want to have mouseover effect like stackoverflow.

Solution

  • I know this is old, but I was looking for the same thing, and... In case anyone wants something that actually looks like StackOverflow's tag tooltips... (and why wouldn't you? they're totally awesome)

    Demo: http://jsbin.com/korehubi/10

    Code: http://jsbin.com/korehubi/10/edit

    Painstakingly reproduced by going through StackOverflow's code.

    Usage: 

    <div class="firstElement">The thing to hover over.</div>
<div class="coolTip" id="firstElement">This is the tooltip content.</div>
    • Assign the "coolTip" class to the tooltip div.
    • Also assign it an ID that matches a class set on the element you want to hover over.
    • Run coolTips() on page load.

    Note the contents of the tooltip div in the example above is just to demonstrate usage. You need to use HTML tags for the tooltip content as shown in the jsbin link, in order to have StackOverflow-esque formatted tooltips. You'll also need all the CSS shown there.

    Enjoy :)

    Update: Now checks if the tooltip would leak out of the window border, and animates from the right or bottom instead in those cases.