How to Use the Tooltip Generator

How to Use the Tooltip Generator

The Tooltip Generator allows you to include text or a button on your pages that will show more or specific information about that text.

For example, hover over me to see how a tooltip works.

The Tooltip Generator can be customized to match the styling of your site.

To add a Tooltip to your Pages follow the instructions found below.

 

How to Use the Tooltip Generator

Click on each section to expand for more information

1. Under 'Tools' choose 'Tooltip Generator'

Under 'Tools' choose 'Tooltip Generator'

How to Use the Tooltip Generator
2. Choose 'Create New Tooltip' from the drop down menu

Choose 'Create New Tooltip' from the drop down menu

Select the 'Add/Edit Tooltip' button

3. Enter the 'Term' that will appear on your page

Enter the 'Term' that will appear on your page

In the 'Term' field, enter the word or words that will appear as a 'live link' or button' on your page.

4. Enter the 'Description' that will appear when hovering over the 'Term'

Enter the 'Description' that will appear when hovering over the 'Term'

5. Click to Save the 'Tooltip'

Click to Save the 'Tooltip'

6. Copy the CF tag to paste onto your page

Copy the CF tag to paste onto your page

There are two options to display the tooltip term: plain text link or a button.

Copy the full CF tag for the display type that you would like to add to your page.

Plain Text Link:

Copy the full cf tag on the left side of the page

 

Button Link:

Copy the full cf tag on the right side of the page

7. Paste All of the CF tags onto your page

Paste All of the CF tags onto your page where you would like those tooltip terms to show

Results

Hover Action

Tooltip Styling

The design and styling of the tooltips can be edited per tooltip generated OR sitewide. Using the sitewide settings will allow you to maintain a cohesive look and feel of your tooltips throughout your site.

To set the default styling:

Under Tools choose 'Tooltip Generator'

How to Use the Tooltip Generator

Select 'Tooltip Default Settings' from the drop down menu and click the 'Add/Edit Tooltip' button

How to Use the Tooltip Generator

Update each field to customize the tooltip throughout your site and click the 'Save Tooltip' button. See below for the styling details.

To Use the Default Styling

When adding/editing a tooltip, check the box for 'Yes, Use Default Styling for Tooltip' checkbox

How to Use the Tooltip Generator

To Customize a Specific Tooltip

When adding/editing a tooltip, unclick the checkbox for 'Yes, Use Default Styling for Tooltip'

The style menu will appear below the tooltip setup

Tooltip Styles Samples

Field
Action
Results

Tooltip Position

Choose the position where the tooltip will appear in relation to the text or button.

Font Color

Enter the 6 character hexadecimal color for the font of the tooltip, or select a color from the color generator.

Back-ground Color

Enter the 6 character hexadecimal color for the background of the tooltip, or select a color from the color generator.

Border Color

Box Shadow Color

Enter the 6 character hexadecimal color for the border of the tooltip, or select a color from the color generator. This field is optional.
Enter the 6 character hexadecimal color for the box shadow of the tooltip, or select a color from the color generator. This field is optional.

Min Width

Max Width

Enter a width in pixels for the minium width of the tooltip.
Enter a width in pixels for the maximum width of the tooltip. Text longer than the max width will wrap onto the next line.