...

View Full Version : Mouse Over Text - Have a text that appears on mouse over



utnalove
04-30-2011, 09:18 AM
Hello, not sure if I am writing in the right forum, or better was in Java... I have no idea!

Please look at this site: Glamourina (http://glamourina.pl)

As you can see there is a newsletter textbox in the top where users can type their email address and click SEND in order to subscribe to the newsletter.
I would like a text to appear immediately when a user puts the mouse over the textbox or over the SEND button.

I found in internet something like... mouse over text.... well in this case it is the same, but not over text, but over textbox or over image (send button).


1) How can I do that? What code to put and where?

bullant
04-30-2011, 09:34 AM
where do you want the text to appear?

utnalove
04-30-2011, 09:38 AM
Hi bullant, I would like a baloon box to appear... better if it appears on the right of the cursor, so if the cursor is in the textbox and a user types the email address it doesn't mess them typing.

I saw something similar to what I would like here (http://www.web-source.net/web_design_tips/html_mouse_over_text_description.htm)

It would be nice to have a similar box to appear... better even if I can choose the background color of the text appearing.

bullant
04-30-2011, 10:04 AM
Something like this?

You can apply your own customised styles to the .tooltip spans.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css">
input, button {
z-index: 1;
}
.ttContainer {
position: relative;
}
.tooltip {
font-size: 0.8em;
display: none;
position: absolute;
padding: 10px 10px 10px 10px;
top: 27px;
left: 50px;
border: 1px solid red;
background-color: peachpuff;
z-index: 5;
}
.ttContainer:hover .tooltip {
display: block;
}

</style>
<script type="text/javascript"></script>
</head>
<body>
<form method="post" action="#">
<div>
<a class="ttContainer">
<input type="text" name="txt1" />
<span class="tooltip">tooltip for <br /> textbox</span>
</a>
</div>
<div>
<a class="ttContainer">
<button id="btnSend">Send</button>
<span class="tooltip">tooltip for <br /> send button</span>
</a>
</div>
</form>
</body>
</html>

utnalove
04-30-2011, 11:00 AM
This is the code of that piece of site...

<div id="feedburner">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=<?php echo $feedburner_id; ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p><input value="<?php _e("Wpisz swój email -> Newsletter","language")?>" class="feed_input" type="text" onfocus="if (this.value == '<?php _e("Subscribe to our Newsletter","language")?>') {this.value = '';}" onblur="if (this.value == '') {this.value = '<?php _e("Enter your email address...","language")?>';}" name="email" /></p><input type="hidden" value="<?php echo $feedburner_id; ?>" name="uri"/><input type="hidden" name="loc" value="en_US"/><input type="submit" class="submit_button" value="" /></form>
</div>

How can I change this code and apply the code you provided? I can put the style piece in the CSS. But what about the rest?

bullant
04-30-2011, 11:07 AM
That code you posted is too hard to read for me the way it's formatted.

It'll take me too long to reformat it so I can work out what is what.

utnalove
04-30-2011, 11:20 AM
I hope it is better now


<div id="feedburner">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=
<?php echo $feedburner_id; ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
<input value="<?php _e("Wpisz swój email -> Newsletter","language")?>"
class="feed_input" type="text" onfocus="if
(this.value == '<?php _e("Subscribe to our Newsletter","language")?>') {this.value = '';}"
onblur="if (this.value == '') {this.value = '<?php _e("Enter your email address...","language")?>';}" name="email" />
</p>
<input type="hidden" value="<?php echo $feedburner_id; ?>" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" class="submit_button" value="" /></form>
</div>

bullant
04-30-2011, 11:31 AM
yep, that's better but I don't see what the problem is.

The demo I posted is a standalone working demo and has input boxes with tooltips, so all you have to do is take the code around in each input box in the demo and place it around the input boxes in your code.

And then apply your own styles as shown in the demo.

utnalove
04-30-2011, 05:13 PM
Original code:


<div id="feedburner">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=
<?php echo $feedburner_id; ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
<input value="<?php _e("Wpisz swój email -> Newsletter","language")?>"
class="feed_input" type="text" onfocus="if
(this.value == '<?php _e("Subscribe to our Newsletter","language")?>') {this.value = '';}"
onblur="if (this.value == '') {this.value = '<?php _e("Enter your email address...","language")?>';}" name="email" />
</p>
<input type="hidden" value="<?php echo $feedburner_id; ?>" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>
<input type="submit" class="submit_button" value="" /></form>
</div>

Original code + your code... I hope it is inserted in right places

<div id="feedburner">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=
<?php echo $feedburner_id; ?>', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<div>
<a class="ttContainer">
<input type="text" name="txt1" />
<span class="tooltip">tooltip for <br /> textbox</span>
</a>
</div>

<p>
<input value="<?php _e("Wpisz swój email -> Newsletter","language")?>"
class="feed_input" type="text" onfocus="if
(this.value == '<?php _e("Subscribe to our Newsletter","language")?>') {this.value = '';}"
onblur="if (this.value == '') {this.value = '<?php _e("Enter your email address...","language")?>';}" name="email" />
</p>
<input type="hidden" value="<?php echo $feedburner_id; ?>" name="uri"/>
<input type="hidden" name="loc" value="en_US"/>

<div>
<a class="ttContainer">
<button id="btnSend">Send</button>
<span class="tooltip">tooltip for <br /> send button</span>
</div>

<input type="submit" class="submit_button" value="" /></form>
</div>

CSS apart... did I put the code in the right way?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum