Add a Mouse-Over Help Icon

If you notice that some fields of your web form occasionally receive unacceptable data, you can add a small help icon to provide more information and/or sample input. The HTML and CSS included here show how to create a small mouse over tool tip dialog box.

mouse-over-help-button

In this article, you add a mouse-over help icon to an existing DataPage.

  1. From the DataPages listing, select the DataPage for which you would like to add the mouse-over help icon and click Edit.
  2. Proceed to the DataPage DataSource screen. Enable Advanced Options if they are not already enabled.
  3. Proceed to the Configure Fields screen. Use the Insert button at the lower left corner of the DataPage Elements panel to insert an HTML block. Using the arrow buttons, move the HTML block immediately after the field where you would like your help icon to appear.
  4. Paste the following HTML code into the HTML block:
    <a href="#" class="help"><img border="0" src="http://static.caspio.com/images/xref/help.png">
    <span><p><strong>Fieldname:</strong> This field needs some extra information</p>
    </span>
    </a>

    Change the information between the two span tags to help your user accurately complete the preceding field.

    If you do not already have header and footer sections, add them now using the Insert button again. Include the following style in your DataPage header:

    <style>
    a.help span {
    display: none;
    width:160px;
    text-align:left;
    color:#000;
    padding:4px;
    -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
    }
    
    a.help:hover {
    position: relative;
    }
    
    a.help:hover span {
    display: block;
    position: absolute;
    padding:4px 10px;
    border: 1px solid black;
    background-color: #eeeeee;
    }
    </style>
  5. Click Finish to save your DataPage.

Note Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.