How to show an image or PDF when form element is hovered?

  • Profile Image
    winnrcs2
    Asked on August 15, 2018 at 05:15 PM

    Hi - I was wondering if it was possible to hover an IMG or PDF when hovering over specified text within one of the Forms?  Thank you!

  • Profile Image
    Jed_C
    Answered on August 15, 2018 at 08:40 PM

    Do you mean to say to prompt a message box when hovering on an image or PDF, correct? If so, you can go to the field properties and under "Advanced" tab, add the text you want inside the "Hover text" box.

    1534379986hover_text.png

    I hope this helps. Let us know if you have any questions or if you need further assistance. 

  • Profile Image
    winnrcs2
    Answered on August 16, 2018 at 11:43 AM
    Hi! No, I would like to hover over text and have an image pop up. Is that
    possible?
    Thanks,
    Anne
    ...
  • Profile Image
    Victoria_K
    Answered on August 16, 2018 at 01:17 PM

    Hello Anne,

    Do you mean to display an image when form element is hovered?

    1534439707screencast55.gif

    Test form: https://form.jotform.com/82274791133963 

    This can be achieved by adding custom css code to your form. I have used this one: 

    #text_3:hover:after {

      content: url(https://cdn.jotfor.ms/assets/img/logo/logo-new@4x.png);

      display: block;

      z-index: 1000;

      position: relative;

      width: 670px;

      left: 600px;

      top: -150px;

      zoom: 0.3;

      border: 4px solid #ccc;

      border-radius: 6px;

      background-color: #f5f5f5;

      box-shadow: 0px 2px 4px #666;

      padding: 5px;

    }

    Related guide: How-to-Inject-Custom-CSS-Codes

    Please let us know if you need any further assistance.

  • Profile Image
    winnrcs2
    Answered on August 16, 2018 at 03:43 PM
    Thank you... Yes, this puts me on the correct path.
    I have added that code (and replaced the URL) on my Form
    https://www.jotform.com/build/82266874449168
    But my question is about this portion of the coding: *#text_3:hover:after
    { *I believe that is indicating where to hover.
    ...
  • Profile Image
    Victoria_K
    Answered on August 16, 2018 at 04:15 PM

    You're correct. The selector must be different. I have adjusted the code under your form and fixed a link to the file (there should be placed direct image url).

    It now works like below. Hope this helps!

    1534450445screencast55.gif

  • Profile Image
    winnrcs2
    Answered on August 16, 2018 at 06:43 PM
    Yes! Thank you, just like your video shows. The only problem is that when
    I load the survey ( https://form.jotform.com/82266874449168), I don't see
    the Bio jpg pop up. I just have a narrow gray box pop up. Hmm...
    ...
  • Profile Image
    Jed_C
    Answered on August 16, 2018 at 07:52 PM

    Below is an invalid URL for an image link.

    https://lh3.googleusercontent.com/wNeOhty6paBfLuRLfAajIwrfNPGlDj1aBk6LktzhUTPqQzUhLVW8AmaQM1IpEo39OZUEUjTEu3jKI-dsZ1f-=w1920-h942 

    That is the URL you've added in your CSS code. It is not working before it's not a valid link. Please make sure to get the actual URL link of an image.

    1534463490The Easiest Online Form Builde

    Let us know if you have any questions or if you need further assistance.