By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,253 Members | 1,652 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,253 IT Pros & Developers. It's quick & easy.

popup hints/information?

100+
P: 118
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
Oct 17 '07 #1
Share this Question
Share on Google+
11 Replies


acoder
Expert Mod 15k+
P: 16,027
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".
Oct 17 '07 #2

100+
P: 118
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
Oct 17 '07 #3

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 18 '07 #4

100+
P: 118
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.
Expand|Select|Wrap|Line Numbers
  1. <div id="hint" style="color:#000000; background-color:#efefef; visibility:hidden;"></div>
^(admittedly I did forget to put the positioning in).

Expand|Select|Wrap|Line Numbers
  1. function show() {
  2.  
  3. document.getElementById('hint').style.visibility = "visible";
  4. }
  5.  
  6. function clearhint() {
  7.  
  8. document.getElementById('hint').style.visibility = "hidden";
  9. }
  10.  
Then to launch the code (code for the text box)
Expand|Select|Wrap|Line Numbers
  1. <input type="text" id="myTextBox" maxlength="50" size="35" value="" onMouseOver="show()" onMouseOut="clearhint()">
Oct 18 '07 #5

acoder
Expert Mod 15k+
P: 16,027
Have you set the left and top values?
Oct 18 '07 #6

100+
P: 118
Have done now. =) It works.
Oct 18 '07 #7

acoder
Expert Mod 15k+
P: 16,027
Good! Glad to see that you got it working.
Oct 19 '07 #8

100+
P: 258
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)
Oct 28 '07 #9

acoder
Expert Mod 15k+
P: 16,027
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.
Oct 29 '07 #10

100+
P: 258
thanks
its working now
Oct 29 '07 #11

acoder
Expert Mod 15k+
P: 16,027
I'm glad you got it working.
Oct 30 '07 #12

Post your reply

Sign in to post your reply or Sign up for a free account.