javascript pop-up window

Question

In some web pages, when we stop mouse cursor on some words (e.g. some popular movie star names) on the web page, a pop-up box near the words will show-up, showing maybe some related pictures for the move star, a short summary for the movie star, and related twitter link for this movie star. Then we can move mouse on the pop-up windows to click for picture or twitter link.

When the mouse cursor is leaving such pop-up window, the pop-up window will disappear automatically.

Are there any existing ready to use code to implement such effect?

BTW: I remembered some web site has some underline keyword, and when mouse move over such keywords, a related Ads windows will pop-up around the keyword. This is the effect I am looking for in this question.

thanks in advance, George

• Josh K: What are you asking? I don't see any question marks.
• Alex: what's the question exactly? How to implement this? There are many ways...
• George2: Sorry Josh, my mistake. Here is what I am asking "Are there any existing ready to use code to implement such effect?".
• George2: Hi Alex, sorry it is my mistake. Here is what I am asking "Are there any existing ready to use code to implement such effect?", I am not a javascript guru and please let me know a simple and easy way to implement. What I want to have is pop-up window around the keyword, not at the corner of the whole web page.

Answer 1

Look at [jQuery TOOLS][1] - the tooltips.

[1]: http://flowplayer.org/tools/index.html jQuery Tools

• George2: Which component or more detailed link for jQuery tools shall I use to implement the effect I am looking for?
• George2: Hi Alex, which component from jQuery tools should I use to implement such effect?
• Ken Ray: George - look at the tooltip tool: flowplayer.org/tools/demos/tooltip/index.html

Answer 2

You're looking for the HoverCard effect?

http://www.shoutmeloud.com/gravatar-hovercards-for-wordpress-org-blogs.html

http://closure-library.googlecode.com/svn/docs/closure_goog_ui_hovercard.js.source.html

• George2: Yes, this is what I am looking for. Any existing ready to use code?
• Gwyneth Llewelyn: The above links are dead as of 2017. Google's Closure Library for Hovercards seems to be still available from here: google.github.io/closure-library/api/goog.ui.HoverCard.html

Answer 3

I think onmouseover is what you need to look into

Answer 4

You might also want to use the title attribute in some HTML elements.

An example from this page:

<span class="reputation-score" title="your reputation score; view reputation privileges">611</span>

When you hover over your reputation you get the message in the title attribute. It's not as fancy as some of the other answers but it is quick and simple.

• YWE: @George. I added an example.