Question

I am currently working on an HTML, CSS, PHP project. I want to display a tooltip to provide a small explanation to the user when the user clicks on an input field on a form. I want the tooltip to appear next to the input field but overlaying the form slightly but instead when it appears it wraps around the edge of the form instead of continuing. I have tried changing the z-index for the tooltip to 1 but it hasn’t made any difference. The tooptip has been made with the use of HTML,CSS and JQuery. Below is the code that I have used to do this.

Below is the code for the form

<form action="index.php" method="post" style="margin-top: auto; margin-bottom: auto;">
    <table class="formTable">
         <tr><td>
    <label for="txtUsername">Username: </label>
    </td>
    <td>
           <input class="forms" type="text" name="txtUsername" placeholder="Username" required autofocus />
           <span class="tooltip" style="z-index: 1;">Please enter your username</span>
        </td>
        </tr>
        <tr>                    
            <td>
            <label for="txtPassword">Password: </label>
            </td>
            <td>
            <input class="forms" type="password" name="txtPassword" placeholder="Password" required /><br />
            </td>
            </tr>
            <tr><td colspan="2">
                <div class="buttonGroup">
                <input class="button" type="submit" name="btnSubmit" text="Submit" /> <input class="button" type="reset" text="Reset" />        </div>
            </td>
            </tr>
        </table>
       </form>

Below is CSS code for the form

form
{
    width: 500px;
    text-align: center;
    height: auto;
    background-color: #95b0ff;
    margin-left: auto;
    margin-right: auto;
    padding: 5px;
    border-width: 1px;
    border-color: black;
    border-style: solid;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    z-index: 1;

}

Below is the CSS for the tooltip

.tooltip {
    padding: 5px;
    margin-left: 50px;
    background: #666;
    /*border: 1px solid #606060;*/
    border: 1px solid white;
    color: #ddd;
    -border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    box-shadow: 0 1px 3px #111;
    -moz-box-shadow: 3px 3px 1px #999;
    -webkit-box-shadow: 3px 3px 1px #999;
    z-index: 2;
 }

Below is the JQuery to show the tooltip

$(function() {
    $('.tooltip').hide();
    $('.tooltip').prev('input').focus(function(){
        $(this).next().fadeIn('slow');
    }).focusout(function(){
        $(this).next().fadeOut('slow');
    });
});

Thanks for any help you can provide.

UPDATE
Thanks to @Rikudo Sennin this has sort of worked. The only problem I have now is that the tooltip doesn’t appear next to the input field, instead it appears slightly underneath like in the image below

Answer 1

Use position: relative on the parent, and position: absolute on the tooltip.

Working Example

Also, on an unrelated note, for= attribute for <label>s searches for <input>s with matching id=s not name=s.