How can I open a small window when the user hovers over some text?

Question

I am preparing a web page with more data that can possibly be shown without making the page really cumbersome. I am considering different way to do this. One way would be to have the extra data magically appear on a small window when the user hovers over a particular part of text.Yahoo! Answers does something like that when you hover over a user. But I suppose that must be way to complex to code (for my level).

SO I am looking for a simple way to get a small pop up window to appear next to the mouse pointer when the user hovers on a particularly interesting text. The window should disappear automatically once the user leaves the text. On this topic I have a few questions:

• How can this be done?
• Can it be done without using JavaScript?
• What other solutions should I consider? (For example I have seen some web pages expand some sections, when the user hovers click on them)

Answer 1

Ya this can be done using javascript.

You have to write events for mouseover and mouseout of the text element. Create a div with some styling applied and show the text inside the element as the div's innerText. Set the position of the div according to the text element.

Answer 2

Just use a DIV to show your text, to open a completely new window is overkill and seeing as most people have popup blockers in their browsers, the window won't even show. I suggest using JQuery (nice to start with if you are new as it will make your Javascript development WAY easier) and the JQuery Tooltip plugin found here

Answer 3

Hello,

You could also use the Yahoo! User Interface (YUI) library which is similar to jQuery. In fact this is very likely going to be what they used on the Yahoo! Answers site.

Take a look at their very useful site. http://developer.yahoo.com/yui/container/overlay/

Answer 4

The prettiest solution would probably be using jQuery and the jQuery tooltip plugin, as mentioned above. If you are really keen on avoiding javascript, you can reach this goal with just the use of css:

<div id="bigdiv">
bla
<div id="tooltip">this is a bla</div>
</div>

#tooltip{
  display:none;
}
#bigdiv:hover #tooltip{
  display:block;
}