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

  • jobelpro
    Asked on 13 lutego 2024 09:05

    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.

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


  • Vincenzo Jotform Support
    Replied on 13 lutego 2024 09:52

    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. How to add an info icon with hover text on the right side of the screen?  Image 1 Screenshot 50

    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. How to add an info icon with hover text on the right side of the screen?  Image 2 Screenshot 61
    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.

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

    Result:

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

    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.