Tooltip on button image mouse over in form html code?

  • Profile Image
    Asked on December 20, 2012 at 11:46 PM

    Hello,

    My contact form's button uses a button image located in a folder on my website's server and it does not show in my WYSIWYG html editor, only the form html code in a Div (ID) container. Since my html editor for my website allows me to insert my contact form's html into a "html box" and move it to where I want the button to appear in the html editor, it will not show the contact button until I publish my website to the server. Therefore I was wondering if there is some additional code that can be inserted/added into my existing contact form's html code so that I can have some text appear (a tooltip like "Click here to use our quick contact form!") when the customer hover's over it:


    mail_logo.png

    Is this possible and how would be gretly appreciated!!

    Thanks!

    Billy

  • Profile Image
    liyam
    Answered on December 21, 2012 at 12:50 AM

    Hello Billy.  You should be able to edit your form's source to be able to add some codes in it.  If it does not show on your editor then it would be difficult to do something about what you are trying to achieve.

    To be able to help you further, can you tell us what editor you are using and do you have a code for your tool tip already which you want to insert on your page?

    Thanks.

  • Profile Image
    Answered on December 21, 2012 at 01:21 AM

    Hello,

    The html editor is WYSIWYG Web Builder ( http://www.wysiwygwebbuilder.com ) and I do not have any tooltip code yet, that's what I was wanting to add to the contact form's lightbox embed html code:

    <script src="//static-interlogyllc.netdna-ssl.com/min/g=feedback2" type="text/javascript">
    new JotformFeedback({
    formId:'23438678267164',
    base:'http://jotform.us/',
    windowTitle:'Contact Us!',
    background:'#FFA500',
    fontColor:'#FFFFFF',
    type:2,
    height:500,
    width:590
    });
    </script>
    <a class="lightbox-23438678267164" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="/images/mail_logo.png" /></a>

    Thanks!!

    Billy

  • Profile Image
    liyam
    Answered on December 21, 2012 at 02:14 AM

    Hello Billy.  There are a few available HTML code sources online that can be searched.  One of which is this: http://trentrichardson.com/examples/csstooltips/.  So let's try using this instead.

    You can download the zipped file and get the images and CSS code sample.

    Next, add this CSS style on your web page:

    /*---------- bubble tooltip -----------*/ a.tt{ position:relative; z-index:24; color:#3CA3FF; font-weight:bold; text-decoration:none; } a.tt span{ display: none; }/*background:; ie hack, something must be changed in a for ie to execute it*/ a.tt:hover{ z-index:25; color: #aaaaff; background:;} a.tt:hover span.tooltip{ display:block; position:absolute; top:0px; left:0; padding: 15px 0 0 0; width:200px; color: #993300; text-align: center; filter: alpha(opacity:90); KHTMLOpacity: 0.90; MozOpacity: 0.90; opacity: 0.90; } a.tt:hover span.top{ display: block; padding: 30px 8px 0; background: url(bubble.gif) no-repeat top; } a.tt:hover span.middle{ /* different middle bg for stretch */ display: block; padding: 0 8px; background: url(bubble_filler.gif) repeat bottom; } a.tt:hover span.bottom{ display: block; padding:3px 8px 10px; color: #548912; background: url(bubble.gif) no-repeat bottom; }

    And then insert the 'tt' class in the anchor tag (<a>) on your feedback form so it will look like this:
    <a class="lightbox-23438678267164 tt" style="cursor:pointer;color:blue;text-decoration:underline;"><img src="/images/mail_logo.png" /></a>


    Take note that the class lightbox-23438678267164 and tt has a space in between.

    Then save the images in the directory where the CSS script can find it.

    If you need further assistance, please let us know.