I'm looking for a smart tooltip popup in javascript or jquery

Question

I am looking for a tooltip popup which is appended to some links on my website.

• the tooltip popup should fade in when users mouse hovers.
• the tooltip popup should stay active while the user is navigating in it.
• the tooltip should popup to the top/bottom or side depending on it's position (e.g. to the bottom if there is not enough space at the top)

Any idea or recommendation for something like this? Maybe jquery?

Solution 1

You could try qtip -

http://craigsworks.com/projects/qtip/

Solution 2

The trick is in the CSS, not the JavaScript. First create your popup in static HTML the way you want it to look when active. Then hide it and use .fadeIn() in jQuery.

I'd try something like this:

<a href="foo.htm" class="tooltip">
    Foo
    <div>Tooltip content</div>
</a>

CSS:

a.tooltip {
    position: relative;
}
a.tooltip > div {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -150px;
    width: 300px;
}

JavaScript:

$("a.tooltip").hover(function () {
    $("> div", this).fadeIn();
},
function () {
    $("> div", this).fadeOut();
});

Edit: Here's a demo: http://jsfiddle.net/gilly3/b3PjW/. I take back the part about the JavaScript not being the tricky part. Accounting for links on the edges of the screen means plenty of positioning logic. My jsfiddle does a little of it, but doesn't take into account scrollbars or vertical positioning. That may or may not be an issue for you. If it is, a good plugin should do all that for you.

Solution 3

Using pure css. Hint.css might be useful.

<p class="hint--bounce" class="hint--rounded" data-hint="Popup text!">blah</p>

Solution 4

I wrote a new jQuery based module 'cause I wanted Twitter's nice tooltip. But their tooltip was way too simple, featured no move-in or move-out animation. The API was kind of worthless to use in a real programmatic environment. Even so, I also found it was buggy at times. So I wrote my own replica of their tooltip (from scratch! I didn't even look at their code.) with some added benefits. Goto www.matooltip.com and have a view at the advanced example you'll see at the bottom of the main page (click the link that says "lines of code"). To match all of your intended purposes, you'll have to become a power user and take over the content management and setup your own event handlers like I kind of do in that particular example. Still, the module will be a real breeze for you. Positioning the tooltip and all the display logic are built in! I hope the complementary site has all the answers you'll need, feel free to contact me otherwise and I'll help you out. I can even write a new version and implement some new features if you want so and if they fit the overall design goal I have for this module.

Solution 5

I believe this nice jQuery plugin will do the trick for you

Coda Popup Bubbles

View more solutions

Comments

[Alex Jillard]

qtip works great. Allows for custom styles/animations and has logic built in to make sure the tooltip doesn't place itself off-screen.

[Stéphane]

As a single ~4800 byte file (minimized) this is a nice pure css solution which is super easy to use. Edited the answer to include an example.