Floating tooltip and required field warnings

  • Resolved zukenstein

    (@zukenstein)


    3 years, 6 months ago

    Hi I have fields that have been aligned to the center of the form but if I mark them as required or have a floating tooltip the warnings and tooltips appear at the left side. What custom css code should I use to align them in the center as well?

    Have tried a few different things but no joy

    Thanks

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @zukenstein

    I suppose you’re aligning the form’s fields with CSS. Please, send me the link to the page where the form is inserted to check the styles.

    Best regards.

    Thread Starter zukenstein

    (@zukenstein)

    Thanks I have put up a simple page to view what’s happening

    https://81b.co.uk/cff-test-page/

    Plugin Author codepeople

    (@codepeople)

    Hello @zukenstein

    Please, enter the style definition below through the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

    
.ui-tooltip.uh-tooltip,
#fbuilder div.cpefb_error {
    margin-left: calc( 50% - 110px);
    width: 220px;
}

    Best regards.

    • This reply was modified 3 years, 6 months ago by codepeople.
    Thread Starter zukenstein

    (@zukenstein)

    Thanks That worked for the required field warning but not for the tooltip

    Plugin Author codepeople

    (@codepeople)

    Hello @zukenstein

    Please, enter the styles definition with the !important; modifier, and remember to purge your website’s cache generated with “WP-Super-Cache”

    .ui-tooltip.uh-tooltip,
#fbuilder div.cpefb_error {
    margin-left: calc( 50% - 110px) !important;
    width: 220px !important;
}

    Best regards.

    • This reply was modified 3 years, 6 months ago by codepeople.
    Thread Starter zukenstein

    (@zukenstein)

    Thanks did all that and the tooltip is still on the left, how does it show when you access the page?

    Plugin Author codepeople

    (@codepeople)

    Hello @zukenstein

    I’m sorry, my fault. Please, use the following style definition:

    .ui-tooltip.uh-tooltip{
    left:50% !important;
    margin-left:-110px !important; 
    width:220px !important; 
    text-align:center !important;
}
#fbuilder div.cpefb_error {
    margin-left: calc( 50% - 110px) !important;
    width: 220px !important;
}

    Best regards.

    Thread Starter zukenstein

    (@zukenstein)

    Thats excellent, works great now, thanks very much

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Floating tooltip and required field warnings’ is closed to new replies.