Glossary Tooltip

Automatically Highlight Terms & Show Tooltips

Tooltip Settings

The Tooltip Settings allow you to control how glossary definitions are displayed when visitors hover over or tap highlighted glossary terms.

You can customize the tooltip’s behavior, appearance, animation, positioning, and mobile experience to match your website while providing visitors with quick access to glossary definitions without leaving the current page.

For most websites, the default settings provide an excellent balance between usability and performance.

Tooltip Behavior

These settings control when and how tooltips are displayed.

Enable Tooltips

Enable or disable glossary tooltips across your website.

When enabled, visitors can view glossary definitions by hovering over highlighted terms.

If disabled, glossary terms continue to work as normal links without displaying a tooltip.

Trigger Event

Choose how visitors open a glossary tooltip.

Available trigger methods include:

Hover is recommended for desktop devices, while click provides a better experience on touch devices.

Show Loading Indicator

When enabled, a small loading indicator appears while the tooltip content is being prepared.

This provides visual feedback, especially when glossary content is loaded asynchronously.

Close Tooltip Automatically

Choose whether tooltips should close automatically when the visitor moves the mouse away or clicks outside the tooltip.

Automatic closing helps keep the page uncluttered and improves the browsing experience.

Tooltip Position

Glossary Tooltip automatically calculates the best position for each tooltip.

You can also choose a preferred placement.

Supported positions include:

  • Top
  • Bottom
  • Left
  • Right
  • Auto

The Auto option is recommended because it prevents tooltips from overflowing outside the browser window.

Tooltip Appearance

Customize the overall appearance of glossary tooltips to match your website’s design.

Width

Control the maximum width of the tooltip.

A moderate width improves readability while preventing excessively long lines of text.

Background Color

Choose the background color displayed behind the glossary definition.

For most websites, a white or dark neutral background provides excellent readability.

Text Color

Customize the text color used inside the tooltip.

Ensure sufficient contrast between the background and text for accessibility.

Border

Add a border around the tooltip.

You can customize:

  • Border width
  • Border color
  • Border radius

Rounded corners generally provide a modern appearance.

Shadow

Enable a subtle shadow to separate the tooltip from the page content.

Avoid heavy shadows that distract readers.

Typography

Customize the text displayed inside the tooltip.

Font Size

Adjust the font size used for glossary definitions.

A size between 14px and 16px is recommended for most websites.

Line Height

Increasing line height improves readability, especially for longer definitions.

Title Styling

If your tooltip displays the glossary term title, you can customize its:

  • Font size
  • Font weight
  • Color
  • Margin

A slightly larger, bold title helps visitors quickly identify the glossary term.

Animation

Animations make tooltips feel smoother and more responsive.

Choose the animation that best matches your website.

Common options include:

  • Fade
  • Scale
  • Slide
  • None

Subtle animations generally provide the best user experience.

Animation Duration

Control how quickly tooltips appear and disappear.

Fast animations usually feel more responsive while maintaining a professional appearance.

Mobile Experience

Tooltips behave differently on touch devices because hover is unavailable.

The plugin automatically provides a mobile-friendly experience.

Recommended settings include:

  • Open tooltips on tap.
  • Allow visitors to close the tooltip by tapping outside it.
  • Use a slightly wider tooltip for small screens.
  • Keep animations simple for better performance.

These settings make glossary definitions easy to read on phones and tablets.

Accessibility

Glossary Tooltip is designed to be accessible to all users.

For the best accessibility:

  • Ensure sufficient color contrast.
  • Use readable font sizes.
  • Support keyboard navigation.
  • Avoid relying solely on color to indicate glossary links.
  • Keep tooltip content concise and easy to understand.

These practices improve usability for visitors using keyboards, screen readers, and assistive technologies.

Best Practices

For the best user experience, we recommend the following configuration:

  • Enable tooltips.
  • Use automatic positioning.
  • Keep animations subtle.
  • Use readable typography.
  • Add a light shadow for visual separation.
  • Ensure high color contrast.
  • Optimize the mobile experience for touch devices.

These settings create clean, responsive, and accessible glossary tooltips that work well across all modern devices.

Next Steps

Your tooltips are now fully configured.

Continue with the next guide to learn how to optimize Glossary Tooltip for maximum performance, compatibility, and faster page loading.

Next: Performance & Optimization