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

    can I add popup text to these images?

    Asked by The_Mighty_Optiq on April 06, 2012 at 09:37 PM

    I attached a link to a sample form with photos of templates I'm going to be using.  If you look on the upper right hand side you'll see I have four pics with Saturn in them labled Definit Object. Indefinite Object, Shape Oject and Debri Objects....  what I want to do is have one of those help boxes pop up on each one with a 2 entence definition of each one...  I figured I'd use the free text HTML editor for that...  just wondering if there's some way of doing it that doesn't involve java....

    Page URL:
    http://form.jotform.us/form/20968223762155

  • Profile Image
    JotForm Support

    Answered by idarktech on April 06, 2012 at 09:58 PM

    Hi there,

    I think what you are looking for is a Hover Text for your images. To do that, simply click your images and click on Hover Text on the toolbar. See this screen:

    Hope this helps. Let us know if you have any further questions. Thanks for using JotForm!

  • Profile Image

    Answered by The_Mighty_Optiq on April 06, 2012 at 10:21 PM

    is this using the photo box or the free html one?...  I see what you're saying, but that applies to the ENTIRE pic...  I want to do it 4 times in 1 pic with 4 different images

    In the pic above you'll see in the upper right hand corner that there's 4 small pics.. I want each of those to have their own box with their own definition when you roll over each one individually....  hope this makes things clearer.. thanks for your response though!!!

  • Profile Image
    JotForm Support

    Answered by liyam on April 06, 2012 at 11:31 PM

    You can try doing this http://alt-web.com/Tutorials/tooltips-on-image-maps.html but this is using javascripts so you'll need to export your form's HTML source to your own web page to achieve this.

  • Profile Image
    JotForm Support

    Answered by idarktech on April 07, 2012 at 12:47 AM

    @The_Mighty_Optig,

    I don't know if this is OK with you. I have cloned your form and added some CSS Codes for the hover text. Please clone this form back to be able to edit the hover description for your images. Like you've mentioned, I only used Free Text HTML Tool for the images. Hope this helps.

    Here: http://form.jotform.me/form/20968698715472?

    Clone Guide: http://www.jotform.com/help/42-How-to-clone-an-existing-form-from-a-URL

    Thanks.

  • Profile Image

    Answered by The_Mighty_Optiq on April 07, 2012 at 03:37 AM

    YES IDARKTEC THAT'S EXACTLY WHAT I WANT!!!!! THANKS!!!!!!

  • Profile Image
    JotForm Support

    Answered by abajan on April 07, 2012 at 03:51 AM

    Good stuff, Elton! I've cloned the form to experiment with styling and positioning the tooltips.

    Cheers

  • Profile Image

    Answered by The_Mighty_Optiq on April 07, 2012 at 04:00 AM

    ok.... I just copied the coding and am looking at it..... I don't see where anything is... here's the code I got...

     

    #jotformmap {margin:0; padding:0; font-family:arial, helvetica, sans-serif; font-size:8pt;}

    #jotformmap li {margin:0; padding:0; list-style:none;}

    #jotformmap li a {position:absolute; display:block; text-decoration: none; background:url (blank.gif);}

    #jotformmap li a span { display:none; }#jotformmap li a:hover span {position:relative; display:block; width:200px; left:20px; top:20px; padding:5px; border:1px solid #000;
    background:#fff; text-decoration:none; color:#000; filter:alpha(opacity=80); opacity:0.8; }

    #jotformmap  a.image1 {top:80px; left:420px; width:80px; height:90px;}

    #jotformmap a.image2 {top:80px; left:470px; width:50px; height:50px;}

    #jotformmap a.image3 {top:80px; left:550px; width:50px; height:50px;}

    #jotformmap a.image4 {top:80px; left:610px; width:115px; height:95px;}

    /*-----next css----*/

    #jotformmap1 {margin:0; padding:0; font-family:arial, helvetica, sans-serif; font-size:8pt;}

    #jotformmap1 li {margin:0; padding:0; list-style:none;}

    #jotformmap1 li a {text-decoration:none; position:absolute; display:block; background:url(blank.gif);}

    #jotformmap1 li a span { display:none; }

    #jotformmap1 li a:hover span {position:relative; display:block; width:200px; left:20px; top:20px; padding:5px; border:1px solid #000; background:#fff; text-decoration:none; color:#000; filter:alpha(opacity=80); opacity:0.8;}

    #jotformmap1 a.image11 {top:80px; left:420px; width:80px; height:90px;}

    #jotformmap1 a.image22 {top:80px; left:470px; width:50px; height:50px;}

    #jotformmap1 a.image33 {top:80px; left:550px; width:50px; height:50px;}

    #jotformmap1 a.image44 {top:80px; left:610px; width:115px; height:95px; }

    /*----3rd css line----*/

    #jotformmap11 {margin:0; padding:0; font-family:arial, helvetica, sans-serif; font-size:8pt;}

    #jotformmap11 li {margin:0; padding:0; list-style:none; }

    #jotformmap11 li a {position:absolute; display:block; text-decoration:none; background:url(blank.gif);}

    #jotformmap11 li a span { display:none; }#jotformmap11 li a:hover span {position:relative; display:block; width:200px; left:20px; top:20px; padding:5px; border:1px solid #000;
    background:#fff; text-decoration:none; color:#000; filter:alpha(opacity=80); opacity:0.8;}

    #jotformmap11 a.image111 {top:80px; left:420px; width:80px; height:90px;}

    #jotformmap11 a.image222 {top:80px; left:470px; width:50px; height:50px;}

    #jotformmap11 a.image333 {top:80px; left:550px; width:50px; height:50px;}

    #jotformmap11 a.image444 {top:80px; left:610px; width:115px; height:95px;}

    Is that everything?... because on the form I see the lil boxes pop up talking about parrots, rabbits, snails n dogs...... but I don't see where it's represented in the coding.  I don't see any of that info or any link linking to it, are you using photos instead of text?  I'm lost now... lol

  • Profile Image
    JotForm Support

    Answered by abajan on April 07, 2012 at 04:39 AM

    @The_Mighty_Optiq

    That's the form's injected CSS. To edit the tooltips, load the cloned form into the form builder, click the second "free text" field and then click the HTML button in the toolbar. Click and drag the bottom right corner of the box to expand it and then edit the stuff about parrots, rabbits, snails and dogs to suit:

    (Click image to zoom to actual size)

    (I suggested clicking the second field because that's the one whose HTML has been properly formatted. In other words, it's beautiful!)

    Incidentally, in case you're wondering, all that "parrots, rabbits, snails and dogs" stuff came from this tutorial.

    If you need additional help with this, do let us know.