How to Style the Field Hover Text?

Please review this thread http://www.jotform.com/answers/35917

Our colleauge Abajan's solution shows the many differnt CSS code that can be used to style the fields' Hover Text.

Let us know if you encounter difficulty following the same solution.

Thanks.

Hi

The code given I assume changes the position of the bubble. What I am asking to change the style of the bubble meaning change the background of the bubble which white at the moment to say red, change the colour of the border etc?

Can I use the same code?

Rgds

Kish

Hi Kish,

To start with, I will change the general hover text's appearance. If you want to customize them differently for every field, we can look into it later. Below, you will see the necessary CSS code that changes the hover text background and font color. By injecting these codes into your form, you can easily make those customizations.

.form-description-content {

    color: rgb(249, 198, 56);

    background: black;

}

.form-description-arrow-small {

    border-color: transparent black transparent transparent;

}

On red marked area, you can change the font color of the "Hover Text" (you can also add hex color code or just the name like "red") and with blue marked areas, you can set the background color of it. Please, check the results from the below:

Please, declare your needs, so I can add more customizations to it.

Thanks.

Hi Mert

Thanks for your prompt reply. Managed to change the colours as I want. Need the following as well.

1. How to Bold the text description 

2. How to change the border colour which is white at the moment.

3. I need to shift or place the bubble such that it does not overlap the input boxes see Home Address hover text and also Department Hover Text...covers the box

rgds

kish

Below, you will see the necessary code with their comments for your questions 1 and 2:

/.border color./

.form-description {

    border: 4px solid #292861;

}

.form-description-arrow {

    border-color: transparent #292861 transparent transparent;

}

/.bold font./

.form-description-content {

    font-weight: bold;

}

For your 3rd question, adjust the "right" variable's px value.

.form-description {

    right: 10px;

}

Please, see the changes from the below:

Regards.

Hi Mert

Thanks for the input...

1. but there is a border point see my form that is white how do I get that red as well.

3. for the hover text right adjustment I assume the code your gave right:10px will shift ALL the bubble by 10px to the right...am I right? what happens if I want different adjustments for different hover text bubbles?

Appreciate your answer

best rgds

ksh

1) I believe you are referring to the border of this field:

Simply inject the following CSS code: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

.form-dropdown {

    border-color: none !important;

}

2) On regards of your second question, it will be addressed here: http://www.jotform.com/answers/776499 

3) Unfortunately, the share the same class ".form-description", so it's the same adjustment for all.

4) Your fourth question will be addressed here: http://www.jotform.com/answers/776501 

Hi

No I am not referring to what you are suggesting. I am referring to the hover text as you can see below there is a grey arrow tip above the red arrow tip. How do I change the colour of the grey to be red as well?

I will wait for the response for q2 and 4 once they get to me.

best rgds

kish

If you want to change the arrow color from this:

To this:

Inject the following code:

.form-description-arrow {

    border-color: transparent #d02d17 transparent transparent;

}

Let us know if you need more help.

Hi Kish,

Yes, you are right about the limits. The form contents are in a big "div", so the class called "form_all" is contains all other elements and has a "650px" width by default. By increasing it, we can move the hover text more away from the fields; but before this please see the current structure:

As it is seen above, the area between the red rectangle's right and left sides are showing the "650px" wideness. If we come to our hover text's position, we need to set "right" value as "0px" to place it to the outer div's border.

.form-description {

    right: 0px;

}

Then, we can enlarge the "form-all"'s width,

.form-all {

    width:900px;

}

Please, see the results from the below:

I hope this one will work for you. Please, don't hesitate to contact us for further assistance.

Thanks.

Hi Mert

Perfect I got  this sorted I expanded the all form size to 800 px ad placed the hover text about 10px from the right. So work fine.

Thanks for your help

kish

Kish,

You are most welcome. I'm happy to see that the problem is solved for you. For your any other CSS styling problems, you can contact us without any hesitation.

Have a great day.

Hi

Look at form Insight Academy Registration Form

Just noticed that one of my hover text at Department box is not displaying like the rest. Sorry did not notice this before. All the other hover text are displaying correctly at the right position.

Please where I have gone wrong

rgds

kish

In order to fix this one hover box, please use the following code:

#id_20 .form-description { right: -140px; }

The #id_20 part ensures that the code will be applied to only the hover box inside form field 20 (the Department field), and rest of the code moves hover box further right than it was before:

Please let us know if you need any further assistance with styling or positioning it, and we will be happy to help.

Hi

I added the CSS code you gave above in my form Insight Academy Registration Form....it did not work the way you have shown above. Pls check and let me know if I  have injected the code correctly.

thanks

kish

Hello,

Go to Designer and comment (or remove ) the CSS block :

/*.form-description {

    right : 15px;

}

*/

And update the CSS code above like:

#id_20 .form-description {

    right : -140px!important;

}

You can also use the clone if you need: https://form.jotform.com/60594972375973

Thanks!

Hi

Still not able to get the same effect as yours...by the way test your version say if you do not fill the department field ...it should flag as an error but when this happens your hover text is lost form visibility...pls try out and see...

btw is it possible just to copy details of one field from one form to another? or the only way is to clone the whole form ...?

rgds

kish

I don't think it is possible to copy just a field from another form. May I suggest you to use the clone: https://form.jotform.com/60594972375973 as this will avoid you from removing and adding CSS snippets.

If you still want to use the original form add the bellow CSS:

li#id_20 {

    width : 500px;

}

and change the 'right' property from '-140px' to '15px':

#id_20 .form-description {

    right : 15px;

}

This should fix both the box covering the field and being not totally visible on form error.

Thanks!

Hi

Looks okay now thanks

kish

In the name of my colleague, you are most welcome. Please, always feel free to contact us for your further questions.

Thanks.