Glossary Item Box
Overview
Squirrelcart has a tooltip feature to display information related to certain items when you move your mouse over them. We use the UniTip library by UnitInteractive.com for this feature.
Tooltips can automatically be shown for product thumbnails, category names, and reviews. You can also add custom tooltips to your own HTML in Squirrelcart's template files.
Enabling and Disabling Tooltips
Configuration
There are settings on the Visual Settings page that control tooltips:
Product Thumbnails
Check this to display tooltips when mousing over product thumbnails
Category Names
Check this to display tooltips when mousing over category names in the content area of your storefront page
Product Options Detail Link
Check this to display a tooltip when mousing over option detail page links (if enabled on the option's record).
Product Option Help
When checked, this enables settings on your option records to show a help icon next to a product option field. When moused over, help text is shown via a tooltip.
Product Opt Qty Help
When checked, this enables settings on your option records to show a help icon next to product option quantity fields. When moused over, help text is shown via a tooltip.
Order Options Column
When checked, tooltips will appear for links in the Options column during the checkout process. When Include Qty Info is checked and an option has quantities enabled, the quantity break down will also appear in the tooltip.
Default Tooltip
This controls the default text used for the tooltip when the tooltip field for the product or category is blank.
Append
When checked, the default tooltip shown to the left of this field will be added to the bottom of tooltip text obtained from products or categories, even when they are not blank.
Controlling Tooltips on a per Product/Category Basis
You can control whether or not tooltips are enabled for individual products and categories, and what text will be shown in their tooltips. Product and Categoy records have a Tooltip fieldset on them when tooltips are enabled:
Tooltip Enabled
This controls whether or not tooltips are enabled for this product or category
Tooltip
By default, the text for a tooltip is pulled from the Brief Description field on the same record. If you would prefer to use something different, set this field to Custom, and enter a custom tooltip message in the box below.
<a href="<?php print $Storefront_Home_URL ?>">
<img src="<?php print $Logo_Image['dyn'] ?>" alt="<?php print $Logo_Image['alt'] ?>" width="<?php print $Logo_Image['width'] ?>" height="<?php print $Logo_Image['height'] ?>" />
</a>
Controlling Tooltips for Product Options
This section explains how tooltips work in conjunction with our Product Option features. For more information on product options, please see the Managing Your Store > Products > Product Options section of this documentation.
Option Field Help Tooltip
When tooltips are enabled (see settings above), product option records in your control panel have settings that control help tooltips for option fields as shown below.
When Show is checked, a help icon will be shown near the option field. When the help icon is moused over in your store, a help tooltip will appear. The text in that tooltip is controlled by the Help Text field. The customer will see something like this based on the settings above:
Option Quantity Field Help Tooltip
Squirrelcart has an optional feature that allows customers to specify quantities for product options. In the same fashion as the help tooltips described directly above, you can also enable help tooltips for option quantity fields. The settings appear in the Quantity Field Settings fieldset on your product option records, seen when the Show Quantity Field option is checked.
Based on the settings above, this tooltip would appear like this in the storefront:
Option Detail Page Link Tooltip
Squirrelcart supports displaying an Option Detail page via a link near an option field. This page is used to show more detailed information about an option. You can enable a tooltip for the link to the option detail page via the option record settings shown below:
Based on the above settings, the tooltip shown when the detail link is moused over looks like this:
Adding Tooltips to Other Elements
If you know HTML, you can add a tooltip to any DIV, SPAN, or A tag. For this example, we will add a tooltip to the logo at the top of the storefront page.
© 2001-2017 Lighthouse Development. All Rights Reserved.