Add an information icon that works like a tooltip to form fields with HTML support

  • Profile Image
    dannywouters
    Asked on March 15, 2018 at 09:30 AM

    Is this possible? We are using jotforms for product quote requests and some of the fields are technical in nature. I would like to offer additional information for some fields. 

    For example, a potential customer can select options for a product  from a multiple choice list. It would be great if on each list item, I could place a little "i" or "?", that would pop-up additional information (lightbox, tooltip, etc) for that particular option, either by hovering or clicking on the "i" or "?" icon. 

    I am aware that some form elements have hover text available or sub labels, but they apply to the whole form element, not to individual elements of a list.

    I see a similar question was asked before:

     https://www.jotform.com/answers/1095423-Adding-information-icon-to-each-field-with-pop-up-lightbox-functionality-and-html-support

    Any progress in this?

  • Profile Image
    Victoria_K
    Answered on March 15, 2018 at 11:44 AM

    Unfortunately, we cannot give you the ETA as to the request you mentioned, but I can now see that thread is already assigned to one of our developers and it's status is set to "Important".

    I have noticed that your idea somewhat differs from the one which is already escalated. If you want, we can submit one more feature request with your inputs.

    We will gladly assist if you need more help.

  • Profile Image
    dannywouters
    Answered on March 15, 2018 at 12:50 PM

    Yes please submit this as a feature request, it will make my day once available.

  • Profile Image
    Jim_R
    Answered on March 15, 2018 at 02:21 PM

    To clarify, your request is actually similar to what the other thread is about. I'm also escalating this as a feature request that will serve as a +1 to that idea.

    I'm also currently fiddling around with CSS to see if there's a way around this for the time being. I'm thinking, appending something at the end of the options within the Multiple Choice field can emulate what you're hoping to achieve.

    In case I get lucky in finding a solution, I'll give you a heads up.

  • Profile Image
    dannywouters
    Answered on March 15, 2018 at 02:49 PM

    That would be great if custom CSS can achieve this. Let me know!


  • Profile Image
    Victoria_K
    Answered on March 15, 2018 at 04:06 PM

    I have used the clone of a form at the page you shared as an example.

    There was some custom CSS added to show up some content when each of check-box options is hovered. Here is the supposed output:

    1521143769screencast2.gif

    The code I used:

    #label_input_14_0:hover:after {

        content: "Tool Tip text text text";

    }

    #label_input_14_1:hover:after {

        content: "Tool Tip text text text";

    }

    #label_input_14_2:hover:after {

        content: "Tool Tip text text text";

    }

    #label_input_14_3:hover:after {

        content: "Tool Tip text text text";

    }

    #label_input_14_4:hover:after {

        content: "Tool Tip text text text";

    }

    #label_input_14_4:hover:after, #label_input_14_3:hover:after, #label_input_14_2:hover:after, #label_input_14_1:hover:after, #label_input_14_0:hover:after {

      border: 4px solid #ccc;

        border-radius: 6px;

        background-color: #f5f5f5;

        box-shadow: 0px 2px 4px #666;

        padding: 5px;

        font-size: 10px;

    }

    You need just to replace texts for this tooltips (highlighted green). 

    Here is a simple guide, which would be of help when injecting the code:

    How-to-Inject-Custom-CSS-Codes

    You can also repeat the steps for your other check-box. To do so, please check the field details at the Advanced tab (shown at the screencast below), and insert "label_" there, like #label_input_14_4

    1521144348screencast2.gif

    Here is also my test form:

    https://form.jotform.com/80736427083964

    Feel free to test and clone it.

    Hope this all helps! But, we will gladly assist if you need more help, just let us know.


  • Profile Image
    dannywouters
    Answered on March 28, 2018 at 01:12 PM

    Hi,

    Thank you for this solution, it does exactly what we need!

    I copied and adapted the custom css, but when the tool tip text exceeds a certain length it causes the list to flicker shift to the left.. , you can see it here:

    http://mrf-furnaces.com/furnace-quote-request/

    hover over the accessories list to see that behavior.

    Is there a way to avoid this perhaps by setting a max length and word-wrapping the tool tips?

    Thank you.

  • Profile Image
    Victoria_K
    Answered on March 28, 2018 at 01:30 PM

    Hello dannywouters,

    I will gladly adjust the code as to your needs. As far as I undertood your requirements, here is what I got:

    1522257936screencast3.gif

    If that is acceptable, please go to the last section of code I provided earlier and add some more (highlighted green):

    #label_input_14_4:hover:after, #label_input_14_3:hover:after, #label_input_14_2:hover:after, #label_input_14_1:hover:after, #label_input_14_0:hover:after {

      border: 4px solid #ccc;

      border-radius: 6px;

      background-color: #f5f5f5;

      box-shadow: 0px 2px 4px #666;

      padding: 5px;

      font-size: 10px;

      white-space: pre-wrap;

      display: block;

      width: 250px;   /* << you can change the width of a tooltip */

      z-index: 1000;

      position: absolute;

      right: 100px;  /* << and to set how far from the right it must be */

    }

    Hope this helps!

  • Profile Image
    dannywouters
    Answered on March 28, 2018 at 01:47 PM

    That's perfect! Thanks for the extra css, great support!