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

    How to move location of hover text bubble?

    Asked by Groseeds on March 16, 2015 at 02:15 PM

    The hover text bubble is getting in the way of filling the form. Can you please advise how this hover bubble can be moved to location A and location B (Not sure which will be best). The bubble speech entry will also need to move location on the bubble outer (please see screen shot). Many thanks for your help

    Screenshot
    move thanks and entry
  • Profile Image
    JotForm Support

    Answered by BJoanna on March 16, 2015 at 04:10 PM

    It is possible to move hover text Bubble by Injecting Custom CSS code. Here is the code for option A that you proposed:

    .form-description {

        top : -120px;

    }

    .form-description-arrow {

        border-color : #f3b767 transparent transparent transparent;

        border-style : solid;

        border-width : 10px;

        height : 0;

        width : 0;

        left : 20px;

        top : 120px;

        position : absolute;

    }

    .form-description-arrow-small {

        border-color : whiteSmoke transparent transparent transparent;

        border-style : solid;

        border-width : 7px;

        height : 0;

        width : 0;

        left : 23px;

        top : 119px;

        position : absolute;

    }

    Here is the Link how to Inject custom CSS:

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

    I will replay to you with Option B shortly. 

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 16, 2015 at 04:29 PM

    And here is code for option B:

    .form-description {

        top : 320px;

    }

    .form-description-arrow {

        border-color :  transparent transparent  #f3b767 transparent;

        border-style : solid;

        border-width : 10px;

        height : 0;

        width : 0;

        left : 20px;

        top : -22px;

        position : absolute;

    }

    .form-description-arrow-small {

        border-color :  transparent  transparent whiteSmoke transparent ;

        border-style : solid;

        border-width : 7px;

        height : 0;

        width : 0;

        left : 23px;

        top : -14px;

        position : absolute;

    }

    Option B will look like this.

    And Option A will look like this.

    Hope this will help. Let us know if you need further assistance.

  • Profile Image

    Answered by Groseeds on March 17, 2015 at 11:10 AM

    Hi, thank you for your help. I injected this code (option A) however the hover bubble isn’t quite positioned as it should as shown your  example screenshot. I have checked to see If I have included all the correct code which from what I can see I have. I’ve changed a few px numbers to see if I could correct the positioning myself. 40 minutes later and I’m still struggling to get it in the correct position! Can you please help, thank you.

     

     

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 17, 2015 at 12:25 PM

    Upon testing your form one more time I noticed that hover text box is differently shown in Chrome and Firefox. I am assuming that you are using Firefox because code I provided and tested is working in Chrome and not in Firefox. 

    I will investigate this problem and I will try to find solution and back to you when I find it. 

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 17, 2015 at 01:07 PM

    Please try adding this code as well  inside Inject Custom CSS field.

    div.form-description-arrow, div.form-description-arrow-small { top: 137px; }

    Hover bubble text should like this:

    Hope this will help. 

  • Profile Image

    Answered by Groseeds on March 17, 2015 at 01:49 PM

    I added the code you suggested  however it does not seem to have made a difference. The following three images show how the bubble looks to me through different browsers -

     

    CHROME

     

    FIREFOX

     

    INTERNET EXPLORER

  • Profile Image

    Answered by Groseeds on March 18, 2015 at 06:23 AM

    Hi, thank you for all your help. To resolve the issue we have decided to remove the hover bubble and have added the hover bubble text as a subheading instead. Many thanks for your help :)

     

  • Profile Image

    Answered by Carina on March 18, 2015 at 11:23 AM

    On behalf of my colleague you are most welcome. I'm glad that this situation is solved now.

    If you need further assistance please let us know as we're here to help.

  • Profile Image

    Answered by paulpacey27 on March 22, 2015 at 02:24 AM

    This is awesome. Didn't know this was possible. Jotform Support, can you help me create some code to also move the bubble as per the attached screenshot?
  • Profile Image
    JotForm Support

    Answered by BJoanna on March 22, 2015 at 04:49 AM

    Your question is moved to separate thread. 

    http://www.jotform.com/answers/538112