Glossary Item Box

Squirrelcart v6.1.0

Tooltips

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

  1. Open the Store Settings page
  2. To enable tooltips, check the UniTip Tooltip field. To disable tooltips, uncheck the same field.
  3. Click Save Changes

 

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.

  1. Open the file or record containing the HTML you wish to add a tooltip to. In this case we will be adding the tooltip to the store logo, so open the template file store_main.tpl.php. (see this page for instructions on modifying templates)
  2. Locate the DIV or A tag you wish to add the tooltip to:
    <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
    >
  3. Add a class attribute set to tip. (If the tag already has a class attribute, add tip to it after the existing value: class="custom tip"
    <a href="<?php print $Storefront_Home_URL ?>" class="tip">
         <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
    >
  4. Add a title attribute to the same tag, and put your tooltip text inside it:
    <a href="<?php print $Storefront_Home_URL ?>" class="tip" title="Click to go to our homepage">
         <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
    >
  5. Save the file
  6. Test. You should see a tooltip when you mouseover your store's logo:
     

 

 

 


© 2001-2017 Lighthouse Development. All Rights Reserved.