How to move location of hover text bubble?

  • Profile Image
    Groseeds
    Asked 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

  • Profile Image
    BJoanna
    Answered 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
    BJoanna
    Answered 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
    Groseeds
    Answered 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
    BJoanna
    Answered 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
    BJoanna
    Answered 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
    Groseeds
    Answered 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
    Groseeds
    Answered 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
    Carina
    Answered 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
    paulpacey27
    Answered 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
    BJoanna
    Answered on March 22, 2015 at 04:49 AM

    Your question is moved to separate thread. 

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