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

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

• javascript
• html

• 1 What are you asking? I don't see any question marks. – Josh K Commented Nov 2, 2010 at 16:05
• 1 what's the question exactly? How to implement this? There are many ways... – Alex Commented Nov 2, 2010 at 16:05
• Sorry Josh, my mistake. Here is what I am asking "Are there any existing ready to use code to implement such effect?". – George2 Commented Nov 2, 2010 at 16:06
• 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. – George2 Commented Nov 2, 2010 at 16:07

4 Answers 4

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

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

You're looking for the HoverCard effect?

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

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

I think onmouseover is what you need to look into

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.