Changes to appearance and position of the 'hint text' bubble

Some time ago, I advised that if I had hint text on fields at the bottom of a form screen, that the 'bubble' of the hint text got cut off and was not displayed.

I got some code given to me which effectively 'raised' the bubble - which worked, but was a bit ugly, because of the pre-defined appearance of the bubble (which has a little 'arrow' in the bubble, and now doesn't point to the field in question).

I've since found that this problem (the 'cut off' and non-display) also affects fields on the right margin of a form page too. I've attached a screenshot to show what I mean.

I'm wondering a couple of things...

Is it possible to have the hint box appear 'above' the relevant field, rather than to the right of it?
Is it possible to change the custom shape/border of the 'bubble' to change where the 'arrow' is in the border or to reduce the point-thickness of the border?
Is it possible to change the color - the background grey is ugly! 

Yes, we can change the appearance of your hint bubbles with some custom CSS. The following CSS will position the bubble just above its question:

.form-description {
    top: -44px !important;
    right: auto !important;
}

The following CSS will move the arrow from the left side of the bubble to the bottom of the bubble, where #f5f5f5 should later be changed to match the background color of the bubble:

.form-description-arrow-small {
    left: 3px !important;
    top: auto !important;
    bottom: -14px;
    border-color: #f5f5f5 transparent transparent !important;
}
.form-description-arrow {
    left: 0 !important;
    top: auto !important;
    bottom: -23px;
    border-color: #ccc transparent transparent !important;
}

The following code will change the background color of the bubble, where you can use any valid CSS color in place of #def to set your own desired color:

.form-description {
    background-color: #def !important;
}

Note that the arrow and background should use the same color, and here is the full custom CSS to use on your form to make those changes:

.form-description {
    top: -44px !important;
    right: auto !important;
    background-color: #def !important;
}
.form-description-arrow-small {
    left: 3px !important;
    top: auto !important;
    bottom: -14px;
    border-color: #def transparent transparent !important;
}

.form-description-arrow {
    left: 0 !important;
    top: auto !important;
    bottom: -23px;
    border-color: #ccc transparent transparent !important;
}

You can apply custom CSS to your form by following this guide:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

It would make the bubbles appear like this:

Please try it out and let us know should you need further assistance.

Thanks Boris.
I've just applied this, and it is a really good start.
I've used the same dark purple for all three sections in your suggested
code, which I need to change later, but how do I change the outer grey
border colour, and how to I change the colour of the text?
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

Another problem I've encountered on testing though...it is too close to some controls - it appears that radios are most affected, the arrow overlaps the first radio and makes it very difficult to activate that button

We can move the down arrow further to the right, more towards the middle of the bubble, by changing the value of "left" for .form-description-arrow-small and for .form-description-arrow, so that the change would look similar to this:

.form-description-arrow-small {
    left: 53px !important;
    top: auto !important;
    bottom: -14px;
    border-color: #def transparent transparent !important;
}

.form-description-arrow {
    left: 50px !important;
    top: auto !important;
    bottom: -23px;
    border-color: #ccc transparent transparent !important;
}

We can change the border color of the bubble from gray into anything else by applying "border-color" on .form-description, so the code we would use would look like this:

.form-description {
    border-color: #def;
}

Finally, to change the text color inside the bubble, we would apply a "color" to the element .form-description-content:

.form-description-content {
    color: #AAEB0F;
}

After making these changes to the previously provided code, your entire code for the hover text bubbles would look like this:

.form-description {
    top: -44px !important;
    right: auto !important;
    background-color: #411A99 !important;
    border-color: #411A99;
}
.form-description-content {
    color: #AAEB0F;
}
.form-description-arrow-small {
    left: 53px !important;
    top: auto !important;
    bottom: -14px;
    border-color: #411A99 transparent transparent !important;
}

.form-description-arrow {
    left: 50px !important;
    top: auto !important;
    bottom: -23px;
    border-color: #411A99 transparent transparent !important;
}

Please try it out and let us know how it goes.

That is brilliant, thank you!
There still remains the issue (although I may have asked about it on a
different thread) about the hint bubble being 'hidden' or cut off if a
field is in a 'highlight' or 'error' state.
And while the arrow has moved away now from the check or radio (which is
great!) it still seems like the focus on that check or radio is difficult
to achieve - example if you want to try to replicate this...on page one,
really easy to click checks 2-5, but I can't seem to actuallly check number
1 until I've checked the others!
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...

You're right, I was able to reproduce it.

Append this CSS codes, this should fix this problem.

.form-line-error, .form-line-active{

overflow: initial !important;

}

With regards to the checkbox buttons, I can easily click them.

Hope this helps!

Hi. I've done the code you've discussed.
I can also click checks 2-5 easily, it is 1 that is sometimes a problem.
And I have a similar problem later in the form with several radios.
Is there some code to 'raise' the hint bubble maybe 5 or 10px further above
it's current position, for me to test and see if it is still a problem?
...

Yes you can. From my colleague's CSS codes, under .form-description class, you can change the -44px value on  this line  top: -44px !important;  with the value you want. You can adjust it until you get the desired output.

You can try -70px, the bubble should position just on top of the field label which I think looks pretty good.

Thanks. I did -60. Looks good.
*Regards,*
*Dr. Ben Phillips*
Chiropractor
B.App.Sc.(Comp.Med.)(Chiro) M.Clin.Chiro.(RMIT)
...