How to add an info icon with hover text on the right side of the screen?

I have one more new question:

Is it possible to add a small "i" icon somehow in these places on the screen? When you hover over this field, additional information is displayed, but not everyone immediately knows that there may be something there.

Hi Dawid,

Thanks for reaching out to Jotform Support. Adding an info icon with hover text on the right side of the screen is possible. Let me show you how:

1. In Form Builder, click on the + Add Form Elements button in the top left side of the screen.
2. Under the Basic tab search for the Paragraph element and add it to the form.
3. Next, open the Paragraph element and on the first line add the letter i.
4. On the second line, add the text that you want to display.

Now, to edit the paragraph element, we will have to locate first the Field ID, and then we adjust the CSS code. Let me walk you through it:

1. Click on the Gear icon on the right side of the Paragraph element.
2. Next in the Paragraph Properties panel that will open on the right side of the screen, click on the Advanced tab.
3. Scroll down and open the Field Details hidden section and copy the number at the end of the Unique Name.
4. Update the code below with the number that just copied (you will have to replace the number 109 with the number of your field):

/* Add an info icon with hover text on the right side of the screen - 11818701 */

#id_109 {

  position: relative;

  bottom: 7px;

  z-index: 9999;

  height: 10px;

}

#text_109 p:first-child {

    display: inline;

    background: #0A56A6;

    color: white;

    font-size: 18px;

    font-weight: bold;

    font-family: emoji;

    padding: 1px 13px;

    font-style: italic;

    border-radius: 15px;

    cursor: pointer;

    float: right;

    border: white 2px;

}

#text_109 p:nth-child(2) {

  background: #4a536117;

  color: #606DC7;

  border-radius: 3px;

  padding: 5px;

  display: inline;

  float: right;

  display: none;

  margin-right: 10px 

}

#text_109 p:first-child:hover + p {

  display: inline;

}

Finally, you have to inject the CSS code. Doing that is also easy, let's do it:

1. In Form Builder, click on the Form Designer button, on the top right side of the screen.
2. Next, click on the Style tab.
3. Scroll down to Inject Custom CSS and paste the code provided above.

Result:

That's it. This way you can add an info icon with hover text, please make sure to repeat this action for each info icon that you want to add. Here you can test this demo form or clone it to better understand how it was configured. 

Give it a try and reach out again if you have any other questions.