FAQs

How can change the 'required' asterisk and the tooltip layout?

Written

ChronoForms v5 adds an asterisk after the Label for required inputs and shows a red tooltip when a client-side validation error is found. This FAQ show show you can change the way these look.

The 'Required' asterisk

You can change the color of the asterisk by using this CSS in a Load CSS action in the On Load event of your form. This example uses 'blue' but you can add any color you like:

.chronoform .fa-asterisk{color:blue !important;}

And you can change the size like this:

.chronoform .fa-asterisk{font-size: 7px !important;}

You can change the asterisk to another character similarly. The string '2020' is the Hex value of the HTML entity you want to show, in this case it shows a dagger :

.chronoform .fa-asterisk:before { content: "\2020" !important; }

The 'Required' font

You can change the font - you will probably need to change the character as well. This CSS gives a Georgia asterisk:

.chronoform .fa-asterisk:before {
  font-family: Georgia !important;
  content: "\002A" !important; 
}

The Tooltip color

Again you can change this with CSS in a Load CSS action in the form On Load event:
.gtooltip .gvalidation-error-tip {
  background-color: #4242ff !important;
  border: 1px solid #00f !important;
}
.gvalidation-error-tip .gtooltip-arrow-border {
  border-color: #00f transparent transparent transparent !important;
}
.gvalidation-error-tip .gtooltip-arrow {
 border-color: #4242ff transparent transparent transparent !important;
}
And this to change the text color:
.gvalidation-error-text {
  color: blue !important;
}

The Tooltip text

You can set the error message text for an input element in the Title box of the element. There is only one title setting so if you have more than one validation the message needs to cover both e.g. "A valid email is required"

The Tooltip icon

This will change the color and size of the icon:
.gbs3 .input-tooltip { 
  color: red !important;
  font-size: 24px !important;
}
and this will change the character used
.gbs3 .input-tooltip:before {
  content: "\f06b";
}