B3 Swatches Article
Tooltips
Configure tooltip position, animation, colors, and the mobile disable toggle for term-name hints on hover.
Tooltips add a small hover label for swatches that need more context. Keep them quick and readable, and disable them on mobile when the extra tap is not worth it.
Browse docs
On this page
Tooltip setup
Enable tooltips and choose a position that stays predictable around your layout.
Tooltips show the term name on hover. They are most useful for color and image swatches where the visual alone may not be enough.
Tooltip styling
Adjust color and typography so tooltip content feels deliberate, not generic.
Keep tooltip styling readable and fast. The plugin lets you control background color, text color, font settings, position, animation, and fade timing.
- Colors
- Use strong contrast so the label is easy to scan.
- Typography
- Keep tooltip text smaller than your main form copy so it reads like a hint, not a heading.
- Animation
- Adjust the animation style plus fade-in and fade-out toggles so the hint feels responsive.
Tooltip behavior on mobile
Decide whether mobile visitors should keep tooltips or get a cleaner tap-first experience.
On touch devices, tooltips usually cost an extra tap. If the swatch already has enough context through labels, text, or a clear image, disable tooltips on mobile and keep selection one tap deep.