Tip group
Tooltips for a row of icon buttons: the first one waits a beat, then its neighbors open at once while the group is warm, the tip gliding from one to the next.
- enhancer
- tooltip
- toolbar
- hover
- focus
- labels
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Tip group example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<div data-motion="tip-group" role="toolbar" aria-label="Formatting">
<button type="button" aria-label="Bold"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/></svg></button>
<button type="button" aria-label="Italic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M10 5h8M6 19h8M14 5l-4 14"/></svg></button>
<button type="button" aria-label="Underline"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M7 4v7a5 5 0 0 0 10 0V4M5 20h14"/></svg></button>
<button type="button" aria-label="Link"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg></button>
<button type="button" aria-label="Insert picture"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="5" width="16" height="14" rx="2"/><path d="M20 15l-4-4-8 8"/></svg></button>
</div>import { TipGroup } from "./motion/react/TipGroup";
<TipGroup>Your content</TipGroup><script setup lang="ts">
import TipGroup from "./motion/vue/TipGroup.vue";
</script>
<template>
<TipGroup>Your content</TipGroup>
</template>const el = document.querySelector("#title");
el.dataset.motion = "tip-group";The wrappers: TipGroup.tsx (React, TypeScript) and TipGroup.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-delay | 500 | the wait before the first tip |
data-motion-warm | 600 | how long the group stays warm after a tip closes |
Accessibility
- One shared tip with role="tooltip"; the button it labels points at it with aria-describedby while it shows. It opens on hover and on keyboard focus (not on touch), and Escape hides it without moving focus. - The first tip waits so the pointer can pass by; then the group is warm and the next tips open at once, gliding over. - With role="toolbar" the buttons get one tab stop and Left, Right, Home and End move between them. - Reduced motion shows and moves the tip at once. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.
Size
tip-group.js is 1.3 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.