Skip to content
Fieldbook
Menu
Sign in
EN

Buttons

Dashed outline tooltip button

Dashed outline tooltip button: A dashed ghost button that floods with its accent on hover or focus while a pointed tooltip unrolls out of the edge nearest the button.

Using Dashed outline tooltip button

Dashed outline tooltip button uses the card preview frame with a light/dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

ControlTypeDefaultPreview limits
labeltextArchive projectUp to 28 characters
tiptextMoves it out of the sidebarUp to 48 characters
accentcolor#FF4D8DNo additional limit in the metadata.
dashWidthnumber4From 1 to 8; step 1
gapnumber12From 4 to 28; step 1
placementselecttopOptions: top, bottom
Which frameworks are available for Dashed outline tooltip button?

Dashed outline tooltip button is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Dashed outline tooltip button depend on?

The React metadata lists these npm dependencies beyond React: motion, clsx.

What accessibility details are visible in Dashed outline tooltip button?

The React source for Dashed outline tooltip button includes: native elements (button); attributes and handlers (aria-describedby, aria-hidden); explicit roles (tooltip). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Dashed outline tooltip button handle reduced motion?

Dashed outline tooltip button reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: reduceMotion ? false : { scaleY: 0, opacity: 0, x: "-50%" }. Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Diagonal blob flood button component, a Fieldbook UI component in Buttons.
2538Diagonal blob flood buttonButtonsAn outlined button flooded by a large rounded blob that slides in diagonally from off its top corner and darkens while held.
Still of the Sketched outline button component, a Fieldbook UI component in Buttons.
2664Sketched outline buttonButtonsAn outlined button whose four corners are deliberately uneven, redrawing into a second lopsided shape with a dashed stroke on hover or focus.
Still of the Corner bracket frame button component, a Fieldbook UI component in Buttons.
2596Corner bracket frame buttonButtonsA bare uppercase label that gets boxed in by two L-shaped brackets sliding in from opposite sides and then growing to close the frame.
Still of the Corner bracket seal button component, a Fieldbook UI component in Buttons.
2644Corner bracket seal buttonButtonsTwo short corner brackets grow along the edges until they seal into a complete frame around the label on hover.
Still of the Diagonal swipe button component, a Fieldbook UI component in Buttons.
1850Diagonal swipe buttonButtonsAn outlined button holding a thin slanted blade that straightens and widens until it floods the frame on hover.
Still of the Dot flood button component, a Fieldbook UI component in Buttons.
1632Dot flood buttonButtonsAn outlined pill with a small dot beside its label; hovering grows the dot until it floods the whole button and the label swaps to its inverted twin.