How can I make pop up's in a form?

  • Profile Image
    melobob
    Asked on December 23, 2019 at 04:52 PM

    Hello, what feature or tool makes me generate pop up's in a form?


    As soon as the person places the cursor over a word a pop up is shown, or even if they have to click on a word.



    Thank you !

    Carlos Melo.

  • Profile Image
    Mike
    Answered on December 23, 2019 at 08:20 PM

    There is a 'Hover Text' feature available that allows you to display custom text when the user moves the cursor over the field.

    If you need a tooltip for a word within a Text element, it will be a bit more complicated. For example, you may wrap a word into a span element with a specific class.

    <p>Lorem <span class="tooltip1">ipsum</span> dolor sit amet.</p>

    Then, add the CSS to the form to make a pseudo tooltip popup.

    .tooltip1 {
    position: relative;
    border-bottom: dotted 1px #000;
    }
    .tooltip1:hover:before {
    content: "Tooltip Text Here";
    background-color: #000;
    color: #fff;
    top: 1em;
    position: absolute;
    white-space: nowrap;
    }

    Demo:

    https://form.jotform.com/193566768156070

  • Profile Image
    melobob
    Answered on December 24, 2019 at 04:44 AM

    Great Mike !  Thank you so much !


    Just one more thing on this: how can I put the popup a little farther from the text ? 

    Doing that I'm done with it.

  • Profile Image
    AndrewHag
    Answered on December 24, 2019 at 04:50 AM

    You can adjust the position by changing the top parameter in the CSS code above provided by my colleague.

    Here is the code:

    .tooltip1:hover:before{

         top: 2em !imporant;

    }

    Feel free to change it as per your wish.

  • Profile Image
    melobob
    Answered on December 24, 2019 at 05:40 AM

    Thank you Andrew, I got it !

    One question on this thread: what is the words limit I can insert into that tooltip ?

    Because I'm tryind to insert this content:

    1. Levi´s - 166 anos de história de sucesso da marca que trouxe o jeans para a moda;
       (GRATUITO)
    2.  Tommy Hilfiger - As estratégias da marca para conquistar o consumidor brasileiro;
      Marina Kadooka -  Gerente de Marketing  (GRATUITO)
    3.  Nudie Jeans – As ações da marca sueca que a levou ao pioneirismo em sustentabilidade no mundo da moda; (GRATUITO)
    4.  Ecossistema de Inovação para a moda jeanswear;
      Any Santos - SEBRAE Nacional  (GRATUITO)
    5.  Perspectiva econômica, transformação e novas oportunidades; (GRATUITO)
    6.  Felicidade e Inovação – Deu Match
      Sandra Tescner - Chief Happiness Officer (GRATUITO)
    7. Talk Show – Consumidor Milenium, público Z, onde eles encaixam na diversidade da moda jeanswear (GRATUITO)

    ...  and it isn't accept it

  • Profile Image
    AndrewHag
    Answered on December 24, 2019 at 08:14 AM

    You can add as much content as you want as long as there is no line break. However, if you wish to add a line break, I would suggest you replace it with \A and add word-space: pre; to the CSS code.

    Here is the final code that you need to add:

    .tooltip1:hover:before {

      content: "Levi´s - 166 anos de história de sucesso da marca que trouxe o jeans para a moda; (GRATUITO) \A Tommy Hilfiger - As estratégias da marca para conquistar o consumidor brasileiro; \A Marina Kadooka -  Gerente de Marketing  (GRATUITO) \A Nudie Jeans – As ações da marca sueca que a levou ao pioneirismo em sustentabilidade no mundo da moda; (GRATUITO) \A Ecossistema de Inovação para a moda jeanswear; \A Any Santos - SEBRAE Nacional (GRATUITO) \A Perspectiva econômica, transformação e novas oportunidades; (GRATUITO) \A Felicidade e Inovação – Deu Match \A Sandra Tescner - Chief Happiness Officer (GRATUITO) \A Talk Show – Consumidor Milenium, público Z, onde eles encaixam na diversidade da moda jeanswear (GRATUITO) \A ... and it isn't accept it";

      white-space: pre;

      background-color: #000;

      color: #fff;

      top: 2em;

      position: absolute;

      z-index: 1;

    }

    Here is my demo form: https://form.jotform.com/193573002091956

  • Profile Image
    melobob
    Answered on December 24, 2019 at 01:42 PM

    Very nice, all set until this point. 

    Last step I need to close this thread. This is a form made to work in an app and when I preview my form as cell phone format, I see it as you can check at the image attached.

    So, how can I put the popup content inside phone screen without loosing all those words escaping out ?

    Important tip: no problem setting words smaller

    Thank you !

    1577212936Screenshot_11.png

  • Profile Image
    Welvin
    Answered on December 24, 2019 at 02:00 PM

    Would you mind checking again? I've injected the following custom CSS codes to adjust the mobile view.

    @media only screen and (max-device-width: 550px)  {

    .tooltip1:hover:before {

        white-space: normal;


        width: 350px;

        left: -120px;

    }

    }

    It looks great on my Android phone. Hopefully, that works on your end. 

  • Profile Image
    melobob
    Answered on December 25, 2019 at 08:06 AM

    Ok, thank you, everything is good now !

  • Profile Image
    IvayloK
    Answered on December 25, 2019 at 08:08 AM

    We are glad that it is working now fine for you.

    If you have more questions or concerns, please do not hesitate to contact us again.

  • Profile Image
    melobob
    Answered on January 19, 2020 at 07:50 AM

    Hi guys, I don't know what happened but after I made some changes in the form, popup setting stoped working without I finger the code related to it.

    Could you please check it for me ?

    This is the form URL: https://www.jotform.com/build/193565153402051


    Thank you.

  • Profile Image
    BDAVID
    Answered on January 19, 2020 at 11:21 AM

    No really sure what happened, but it seems like the content had too much extra space, I fixed it like this:

    1579450429Fixcss.gif

    I also added an extra line of code to show the content in the center of the form, please try replacing the code with this one:

    .tooltip1 {

        position : relative;

        border-bottom : dotted 1px #000;

    }

    .tooltip1:hover:before {

        content : "1. Levi´s - 166 anos de história de sucesso da marca que trouxe o jeans para a moda; \A 2. Tommy Hilfiger - As estratégias da marca para conquistar o consumidor brasileiro - \A Marina Kadooka -  Gerente de Marketing; \A 3. Nudie Jeans – As ações da marca sueca que a levou ao pioneirismo em sustentabilidade no mundo da moda; \A 4. Ecossistema de Inovação para a moda jeanswear - \A Any Santos - SEBRAE Nacional. \A 5. Perspectiva econômica, transformação e novas oportunidades; \A 6. Felicidade e Inovação – Deu Match - Sandra Tescner - Chief Happiness Officer; \A 7. Talk Show – Consumidor Milenium, público Z, onde eles encaixam na diversidade da moda jeanswear";

        white-space : pre;

        background-color : #fff;

        color : #3030ad;

        top : 2em;

        position : absolute;

        z-index : 1;

        margin-left: -500px !Important;

    }

    @media only screen and (max-device-width: 550px){

        .tooltip1:hover:before {

            white-space : normal;

            width : 350px;

            left : 380px;

        }


    }

    Result: https://form.jotform.com/200184896597975

    1579450514result.gif

    Let us know if you need more help.

  • Profile Image
    melobob
    Answered on January 21, 2020 at 04:56 AM

    Ok guys, I've add more popups in this form as my customer has asked me that because she likes the way the first one works.

    However, I am not able to adjust them in the meddle of the page, even following the same code, and they are not shown in my devices (both android and Apple OS) when I test the form, only the first one is displayed... allthough all they are shown in the preview mode.

    Could you please check it for me one again ?

  • Profile Image
    IvayloK
    Answered on January 21, 2020 at 08:27 AM

    I will further test your form and contact you later today.

  • Profile Image
    IvayloK
    Answered on January 21, 2020 at 09:59 AM

    I have made some corrections in the CSS code.

    You can clone and test my form from below. Please clone my form, in order to check the CSS code.

    https://form.jotform.com/200203312235939

    Let us know, if this helps.

  • Profile Image
    melobob
    Answered on January 22, 2020 at 05:14 AM

    Hello Jot friends, I'm sorry to say the popups are not working good yet. 

    Only two of them (Trade now, Know how Denim) are poping, the others not, in spite of all of them pop during building mode.

    And words on "Trade now" are spreading out from screen in phone devices.

    I'm sure we just need a little more adjust to get it ready.

    Carlos M. 

  • Profile Image
    IvayloK
    Answered on January 22, 2020 at 07:45 AM

    Did you clone and tested my form (https://form.jotform.com/200203312235939)?

    Here is how it looks on desktop:

    15796966531400.gif

    I also tested on mobile (on Samsung A7). The pop-ups appeared in the center of the screen.

    Can you please tell us the model of your mobile device, so we can try to recreate the issue?

    We will wait for your response.