popup hints/information?

[helraizer1]

my website

In my website, (only working on basic structure so far, only just started) there is a text box for the user to enter a search Criteria or URL to search either Wikipedia or Google, or to go to the URL they inputted. There are 3 buttons - 'Search Wikipedia', 'Search Google' and 'Go!'.

I was thinking people might get confused so I intended to add an instruction on either onMouseOver or onFocus, which reads:

"To search Wikipedia or Google - enter your search criteria and click the corresponding button. If you wish to go to a URL: enter your criteria and Press 'Go!' "

How, using Javascript, would I get the message/instruction to appear, in say, a box hovering underneath the textbox?

Hope that made sense,

Sam

[acoder]

Do you want a floating box (like a tooltip) or just something which appears underneath the box as part of the page?

Create a div and set its top position to be the top of text box + the height of the text box and its left position the same as the text box. Hide it by setting the visibility property as "hidden". Show the box by setting the style.visibility property to "visible".

[helraizer1]

Do you want a floating box (like a tooltip) or just something which appears underneath the box as part of the page?

Create a div and set its top position to be the top of text box + the height of the text box and its left position the same as the text box. Hide it by setting the visibility property as "hidden". Show the box by setting the style.visibility property to "visible".

I tried that with a div, it only hid the text in the div; the div itself (outline of) remained throughout. Should that be the case?

How would I do it as a floating box? The div visibility way?

Sam

[acoder]

Set the position to be "absolute" if you don't want it to be a fixed part of the page.

Show the code that you tried.

[helraizer1]

Set the position to be "absolute" if you don't want it to be a fixed part of the page.

Show the code that you tried.

<div id="hint" style="color:#000000; background-color:#efefef; visibility:hidden;"></div>

^(admittedly I did forget to put the positioning in).

function show() {
 
document.getElementById('hint').style.visibility = "visible";
}
 
function clearhint() {
 
document.getElementById('hint').style.visibility = "hidden";
}
 

Then to launch the code (code for the text box)

<input type="text" id="myTextBox" maxlength="50" size="35" value="" onMouseOver="show()" onMouseOut="clearhint()">

[acoder]

Have you set the left and top values?

[helraizer1]

Have done now. =) It works.

[acoder]

Good! Glad to see that you got it working.

[bnashenas1984]

Hi there
Does anyone know how to show a table or what ever (like a little text) on mouse position..
I mean I need to show a little popup where the mouse pointer is when the mouse is over an object like a link (Like a tooltip)

[acoder]

Use the information in this link to get the mouse position.

If you want, you could search for "javascript tooltip" and get a ready-made solution instead.

[bnashenas1984]

thanks
its working now

[acoder]

I'm glad you got it working.