|
The code provided here will enable you to add a custom 'ToolTip' message that appears when visitors move their mouse over an element of your website. It can display anything such as a basic line of text, several paragraphs, or an image. It can also include dynamic information from AmeriCommerce merge codes.
In the Theme Designer for your current theme, go to the Page Header page, and paste this code into the Javascript section. (It is displayed here as an image due to limitations in the FAQ software; please download the attached file tooltips-code.txt instead.)
Next, go to the Layout Settings page, and paste this code into the Custom CSS section:
.tooltip
{
visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 200px;
font: normal 8pt sans-serif;
color: #2B7198;
padding: 4px;
border: 1px solid #2091BC;
background-color: #EFEFEF;
}
The formatting codes in the lower half (font, color, border, background-color) can be customized if desired, to make the tooltip boxes coordinate with your site's appearance. The width can also be changed if you want the boxes to be wider or thinner, or the whole width line can be removed if you want the boxes to adjust their sizes automatically.
Then, go to the theme settings for a page on which you want to use a tooltip (for example, Product Details). In the Custom Page Design area (in HTML Code mode), add a Div with a class of "tooltip" and a unique ID. This div can include HTML. For example:
The div can also include content from AmeriCommerce merge codes. For example:
Finally, connect the tooltip to an element on that page. This could be an image, a link, a list item, or anything else. Give the element a unique ID, and add these two attributes:
onmouseover="tooltip_show('tooltip_deliveryfee',event);" onmouseout="tooltip_hide('tooltip_deliveryfee');"
(replacing both uses of tooltip_deliveryfee with the ID of the desired tooltip div). For example:
Your tooltip should now be ready to use. Here is an example of these tooltips in use on an AmeriCommerce client's website:
|