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

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?

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.

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

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.

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

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:

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

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.

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.

Hello dannywouters,

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

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!

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