How can I get hover text from HTML block to look like Jotform's hover text

  • Profile Image
    mtlscouts_committee
    Asked on December 09, 2012 at 02:12 AM

    In a few of my forms, I have used the free text/HTML object.  Within these, I have some hover text (titles) that are currently being rendered in simple rectangular areas by the browser.  Is there any (relatively simple) way to make these look like the hover text that is created from the form items that are build directly by Jotform?  Note that my forms reside on Jotform, so the solution needs to either be in the HTML code, or in style sheet injected into the form.

    For example, this form (http://www.jotform.com/?formID=23320517623243) has both jotform hover text, and the default hover text (title).  The Jotform hovers look so much nicer!

    Thanks;

     

     

  • Profile Image
    abajan
    Answered on December 09, 2012 at 05:15 AM

    The simplest way would be to substitute a drop down menu for the free text (HTML) element and set it's size to 20, as I've done in this clone. (The last rule in its injected CSS was used to make the options appear bold.) Also, with the free text version of the dropdown, I don't believe you would not have been able to determine which scout leader was chosen by the user.

  • Profile Image
    abajan
    Answered on December 09, 2012 at 10:36 AM

    Oh, I just realized that the list is just for informational purposes and that none of the names are meant to be submitted. Nevertheless, the solution achieves the hover text styling objective.

    Incidentally, it's actually the penultimate rule that makes the list bold while the last one overrides the default "zebra" styling.

  • Profile Image
    mtlscouts_committee
    Answered on December 09, 2012 at 12:09 PM

    Thanks Abajan.  However, as you discovered, the list is only informational, and I do not want the the user to actually chose/submit one.  Also, I have other elements in free text(HTML) on another form (23215769312250), such as hyperlinks that I would also like to have using the nicer hover text formatting.  Any other possibilities?

  • Profile Image
    idarktech
    Answered on December 09, 2012 at 06:43 PM

    @mtlscouts_committee

    Try injecting the following CSS codes to your form. This might help.

    Get the CSS codes here: http://pastie.org/5504264

    It'll look like this: http://jsfiddle.net/tDQWN/1198/

    Let us know if you need further changes. Thanks!

  • Profile Image
    mtlscouts_committee
    Answered on December 09, 2012 at 09:57 PM

    Thanks;  That looks much nicer if Firefox, but the border & background do not show at all in IE8.

    In both cases, though, the original hover text is also showing.  In IE8, it shows when you hover over the label or anything on the left side(outside the list).  In Firefox, it shows when you hover anywhere.

    I'm guessing there's no way to simply set a class or style to use the Jotform hover style with the arrow.

    ???

    Thanks;

     

  • Profile Image
    idarktech
    Answered on December 10, 2012 at 01:23 AM

    Hi,

    Try this.

    1. Remove the title value inside your Free Text HTML field so it should become like this: <p tittle="">, just leave the title attribute blank.

    2. Inject this CSS codes to your form. http://pastie.org/5505253#

    3. Result:

    Unfortunately I can't mimic the arrow styling without accessing the source code so this is the best I can come up with, maybe my colleagues will be able to provide a better one.

    I hope this still helps. Thanks!

  • Profile Image
    mtlscouts_committee
    Answered on December 11, 2012 at 02:47 AM

    Thank you very much. 

    I was able to use this on <p> & <div> with minor adjustments.  One small note though; If I set the title="" (empty string), it is removed automatically when saved, and then none of it works.  The only way is to put in a single space (title=" ").  Only minor problem with that is that you see the single space being rendered by the browser (in a tiny box) when you hover over it..  Not a big deal...  Unless you know a way to get rid of it?

     

    Thanks again.  You guys are great!

  • Profile Image
    idarktech
    Answered on December 11, 2012 at 02:57 AM

    Hi there!

    Try using the black HTML button on the upper toolbar, it seems to work without being stripped.

    Result (cloned form of yours)http://www.jotformpro.com/form/23451659778973?

    Thanks!

  • Profile Image
    abajan
    Answered on December 11, 2012 at 03:44 AM

    @mtlscouts_committee

    Alternatively, the title attribute can be omitted from the paragraph tag altogether if the attribute section (p[title]) is removed from the selector of the rules targeting the free text element but in the second rule, the values of the left and top declarations would have to be adjusted:

    #text_47:hover {
    position: relative;
    }

    #text_47:hover:after {
    width: 150px;
    content: "This is a list of past Homenetmen-Gamk scouting leaders that we have been able to put together. If you know about someone whos name we have missed, please let us know";
    padding: 4px 8px;
    position: absolute;
    left: 600px;
    top: 18px;
    color: #333;
    font-size: 10px;
    white-space: normal !important;
    z-index: 20px;
    border: 4px solid #CCC;
    -webkit-border-radius: 6px 6px;
    -webkit-box-shadow: 0 2px 4px #666;
    -moz-border-radius: 6px 6px;
    -moz-box-shadow: 0 2px 4px #666;
    border-radius: 6px 6px;
    box-shadow: 0 2px 4px #666;
    background: whiteSmoke;
    }

    The above amendments have been made in this clone.

    There might be a way to include the arrow but I'm not promising anything.

  • Profile Image
    abajan
    Answered on December 11, 2012 at 10:54 AM

    @mtlscouts_committee

    Substituting the following rules for those I last gave will cause an arrow to be displayed on the left of the hover text box, just like the others in the form:

    #id_47:hover, #id_47 #cid_47:hover {
    position: relative;
    }

    #id_47:hover:after {
    width: 150px;
    content: "This is a list of past Homenetmen-Gamk scouting leaders that we have been able to put together. If you know about someone whos name we have missed, please let us know";
    padding: 4px 8px;
    position: absolute;
    left: 607px;
    top: 18px;
    color: #333;
    font-size: 10px;
    white-space: normal !important;
    border: 4px solid #CCC;
    -webkit-border-radius: 6px 6px;
    -webkit-box-shadow: 0 2px 4px #666;
    -moz-border-radius: 6px 6px;
    -moz-box-shadow: 0 2px 4px #666;
    border-radius: 6px 6px;
    box-shadow: 0 2px 4px #666;
    background: #F5F5F5;
    }

    #id_47 #cid_47:hover:before {
    content: "";
    position: absolute;
    top: 17px;
    left: 587px;
    border-style: solid;
    border-width: 10px 10px 10px 0;
    border-color: transparent #CCC;
    display: block;
    width: 0;
    z-index: 1000;
    }

    #id_47 #cid_47:hover:after {
    content: "";
    position: absolute;
    top: 20px;
    left: 594px;
    border-style: solid;
    border-width: 7px 7px 7px 0;
    border-color: transparent #F5F5F5;
    display: block;
    width: 0;
    z-index: 2000;
    }

    The change has been applied to my clone.

    Unfortunately, tests at Browserstack have revealed that neither the box nor its arrow is displayed in Internet Explorer 7 and earlier, and in Safari neither hover element is displayed when the mouse is over the actual list of names but if it's hovered over other parts of the field, the hover elements will appear. I think in every browser which show the box, the arrow vanishes if the mouse is hovered over its text but that's a minor issue.

    Anyway, if you need further assistance with the form or any other JotForm matter, please let us know.

    Thanks.

  • Profile Image
    mtlscouts_committee
    Answered on December 12, 2012 at 01:44 AM

    Once again, thank you very much for your assistance.

    You guys are the best!