Deprecated article
This article is still accurate, but there is an easier way to do this functionality with newer V3/Bootstrap themes. Feel free to look at this article for the easier method of providing tooltips.
|
Note: Theme modification involves any change to the default values in the HTML or CSS of any theme or widget. Support can direct you to the correct page to make changes or to reset the widget, page HTML or CSS to its default value. This will undo any customization that may be in place. Before you create or modify a theme using HTML and CSS it is suggested to have a backup handy.
While theme modification is outside what support is allowed to assist with, if you need assistance with making modification to the theme, our implementation department is available to make these modification at an hour rate. If the service is ever needed please let us know and we will get that process started for you. Or check out our new Theme Store to find a theme that suits your needs.
|
The code provided here enables you to add a custom 'ToolTip' message to different parts of your site. These will appear whenever a customer mouses over the element. It can display anything such as a basic line of text, several paragraphs, or an image. It can also include dynamic information from Spark Pay online store merge codes.
In the Theme Designer for your current theme, go to the Head Tags page. 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 Global CSS Editor, 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;
}
You can format the codes in the lower half (font, color, border, background-color) if desired. Do this to make the tooltip boxes coordinate with your site's appearance. The width can also change 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 automaticall
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 Spark Pay Online Stores 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 a Spark Pay Online Stores client's website:
