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

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?

Answer 1

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.