I am looking for a tooltip popup in javascript or jquery

Question

I am looking for a tooltip that has been added to some links on my website.

• The popup popup should pop up when the user hovers over the mouse.
• The tooltip popup should remain active while navigating through it.
• tooltip should be displayed on top / bottom or side, depending on its position (for example, bottom, if there is no space at the top)

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

Answer 1

You can try qtip -

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

Answer 2

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

I would 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 is a demo: http://jsfiddle.net/gilly3/b3PjW/ . I am returning the part that JavaScript is not the difficult part. Considering links around the edges of the screen means a lot of positioning logic. My jsfiddle does a bit, but does not take into account scrollbars or vertical positioning. This may or may not be a problem for you. If so, a good plugin should do everything for you.

Answer 3

Using pure css. Hint.css may be helpful.

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

Answer 4

I wrote a new module based on jQuery because I wanted to twitter Twitter hint . But their hint was too simple, the animation of moving or moving was not displayed. The API was kind of useless for use in a real software environment. Despite this, I also found that from time to time this was a mistake. So, I wrote my own replica of my hint (from scratch! I didn’t even look at their code.) With some additional advantages. Goto www.matooltip.com and have an idea in the advanced example that you will see at the bottom of the main page (click the link in which the lines of code are written). To meet all your goals, you must become a strong user and take control of the content and configure my own event handlers, as I do in this particular example. Nevertheless, the module will become a real breeze for you. A tooltip and all the display logic are built in! I hope that the additional site has all the answers that you if you need it, don’t hesitate to contact me otherwise, and I will help you.I can even write a new version and implement some new functions if you want, and if they correspond to the general design goal that I have for this module.

Answer 5

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

Coda popup bubbles