Home > WebEOC > Admin Guide > Board Building Tips > Add a Tooltip on Hover

Add a Tooltip on Hover

Table of contents
No headers

If you have created a board and would like users to see more detailed information about a particular input field, ensuring it is filled out appropriately, you can create a tooltip. Tooltips are small pop-up windows that appear when you hover over a field or a field's icon. In the window, brief instructions or explanations are included. 

To include a tooltip, add the following style blocks between the two style tags <style></style> of your style sheet:

a:hover {
    background:#ffffff;
    text-decoration:none;
} /*BG color is required for IE6*/
a.tooltip span {
    display:none;
    padding:2px 3px;
    margin-left:8px;
    width:130px;
}
a.tooltip:hover span{
    display:inline;
    position:absolute;
    border:1px solid #cccccc;
    background:#ffffff;
    color:#6c6c6c;
}

Modify the code as necessary for the styles you want reflected in the tooltip. 

From there, it is easiest to display the tooltip when you hover over a hyperlink. An example of a properly executed tooltip that would display Test as the hyperlink and Information goes here as the tooltip information:

<td>Tooltip <a href="#" class="tooltip">Test<span>Display some information Here</span></a></td>
You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.