Hover text alignment

  • Profile Image
    codelessweb
    Asked on January 31, 2013 at 01:38 AM

    How can I align the hover text to the immediate right of my text fields and not the right of the entire form?

    Thanks in advance!

  • Profile Image
    abajan
    Answered on January 31, 2013 at 06:25 AM

    Thanks for asking. The right margin of each hover text box would have to be increased. The following injected CSS would work for the form shown in your screenshot:

    #id_1 .form-description {
    margin-right: 80px;
    }

    #id_3 .form-description,
    #id_7 .form-description {
    margin-right: 33px;
    }

    For each field whose hover text is to be repositioned, you would first need to find out its ID (highlighted in red above). In Chrome, that information can be found out by right-clicking the field and then clicking Inspect element:

    A panel will open in the bottom half of the browser with the field highlighted, where you'll see the ID. (Depending on where you had right-clicked the field, you may see label_5, input_5 or cid_5 but the important thing is the 5. For example, if you see label_5, you would substitute id_ for label_ in your selector:

    #id_5 .form-description

    The comma in the second rule of the injected CSS above just means that the same right margin is applied to the E-mail and Phone hover text boxes. In other words, it's a shorter way of writing the following:

    #id_3 .form-description {
    margin-right: 33px;
    }

    #id_7 .form-description {
    margin-right: 33px;
    }

    After injecting the CSS into your form, its hover texts should now be positioned like those in this clone. (The CSS can be seen in its source).

    MaxDesign has good tutorials on CSS but if you would need more assistance with this, we'd be happy to help.

  • Profile Image
    codelessweb
    Answered on January 31, 2013 at 08:53 AM

    I got it to work with the instructions - thanks so much, especially for taking the extra effort and cloning that form! :)

  • Profile Image
    abajan
    Answered on January 31, 2013 at 08:58 AM

    Hey, no problem. Glad I could help.

    Cheers