Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts

    Mouse Over Text - Have a text that appears on mouse over

    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

    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?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    where do you want the text to appear?

  • #3
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts
    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

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

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Something like this?

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

    Code:
    <!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>
    Last edited by bullant; 04-30-2011 at 10:17 AM.

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts
    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?

  • #6
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts
    I hope it is better now

    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>
    Last edited by utnalove; 04-30-2011 at 11:24 AM.

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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.

  • #9
    Regular Coder
    Join Date
    Oct 2008
    Location
    Poland
    Posts
    381
    Thanks
    150
    Thanked 2 Times in 2 Posts
    Original code:

    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
    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">
    
    <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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •