CODEWITHSUNDEEP
javascripthtmlpopup
Pietro Speroni
Pietro Speroni

Reputation: 3221

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

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:

Upvotes: 1

Views: 19558

Answers (4)

Jasper De Bruijn
Jasper De Bruijn

Reputation: 1444

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;
}

Upvotes: 3

Simon Cooper
Simon Cooper

Reputation: 1594

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/

Upvotes: 0

Colin
Colin

Reputation: 10638

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

Upvotes: 7

rahul
rahul

Reputation: 187040

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.

Upvotes: 0

Related Questions