What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Adding a help tip with Line checkbox widget

    Asked by Jean-Claude Massé  on August 04, 2016 at 10:30 AM

    Hi!

    I'm trying to add a help tip using hover to the Line checkbox widget.

    I try to put a kind of ? right after the field using a div inside the settings. But I cannot get Overflow to show it.

    In the current form, you will see it cut in two (one part is in the checkbox, the other part is cut by the previous parent element). 

    Page 3: Ubegrenset print i stripsformat

    Any tip on how to get this work?

    Thanks!

    Page URL:
    https://form.jotform.com/61545028829259

    checkbox checkbox widget adding
  • Profile Image
    JotForm Support

    Answered by John_Benson on August 04, 2016 at 01:12 PM

    I believe the issue is that the help tip (question mark) inside the widget is not fully showing.

    Please insert this CSS code inside the wizard widget (wand icon), it is in the Custom CSS tab:

    .help-tip { 
    right: 10px !important;

    Here's the result after adding custom CSS code:

    Hope that helps. Let us know if you need further assistance. Thank you.

  • Profile Image

    Answered by jicihome on August 04, 2016 at 02:00 PM

    No. My issue is that I want to move it more further to the right. This, I can do it. But, it not show because setting the field with overflow: visible doesn't work. (this I why I move it half in and half out. Just to show you that I cannot get overflow working). Or Maybe I can keep it at this place, but I cannot get my P tag to be showed. This P tags is related to information.

    Heres my current settings.

    In the field settings I set this:

    Ubegrenset print i stripsformat<div class="help-tip"><p>This is the inline help tip! You can explain to your users what this section of your web app is about.</p></div>

    My P is hidden, but got a help-tip div hover. So it's should show it. But It doesn't because the tip cannot overflow the parent. 

  • Profile Image

    Answered by fotobaren_ on August 04, 2016 at 03:02 PM

    What Is important, is just to be able to have a tool tip like this:

    http://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip

  • Profile Image
    JotForm Support

    Answered by Welvin on August 04, 2016 at 04:17 PM

    That is because of the width of the widget and since you have the tooltip inside the widget. You may consider doing it this way:

    1. Use our text field to add the tooltip:

    2. Shrink the fields to align them side by side:

    https://www.jotform.com/help/90-Form-Field-Positioning

    3. Inject your tooltip CSS in the Custom CSS area of the form:

    https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You need to adjust the margins.

     

    I've cloned your form and made these changes, check it here: https://form.jotform.com/62166472780965

  • Profile Image

    Answered by fotobaren_ on August 10, 2016 at 05:06 PM

    Thanks. I need to work around this, but it's ok.