Looking for a mouseover feature like stackoverflow

问题:

I love the hover effects of StackOverflow.

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.

回答1:

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.

回答2:

The new jQuery UI tooltip is quite good: http://jqueryui.com/tooltip/#custom-style

The animation is controllable, the tooltip is styleable, you can pretty much mimic the StackOverflow like tooltips.

Note that i linked you the "custom style" example. It shows you how to make custom styles for the tooltip.

Also that by default the tooltip shows the title attribute of an element. There is an example: http://jqueryui.com/tooltip/#custom-content where custom content is set in different ways to show you a few options.

I'm not sure what feature is missing.

EDIT: the custom content demo is bugged on the example site, check it in full page view: http://view.jqueryui.com/menubar/demos/tooltip/custom-content.html

EDIT2: New Solution

Looking at Anton's answer I thought that this could be done correctly by adding the tooltip's div inside the original div, and introducing hoverintent. Also a little sanitization of the code was in order. Check: http://jsbin.com/anegip/2/edit

http://jsbin.com/anegip/3/edit

With a little design, it's what you want.

回答3:

Please have a look this plugin. Using this you can achieve the same effect as same as stackoverflow. click here

回答4:

just make it urself by using (link) . Add html and customize css according to your need.

回答5:

You can use .animate like this demo i made in jsfiddel http://jsfiddle.net/qJ8NB/1/

Just add some nice css on the div and you could make it look like SO.

Here's an UPDATE http://jsfiddle.net/qJ8NB/11/