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

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.

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

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.

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.

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

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

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 !

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. 

Ok, thank you, everything is good now !

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.

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.

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

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

Let us know if you need more help.

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 ?

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

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.

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. 

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

Here is how it looks on desktop:

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.