Overview
The toggletip component is a type of tooltip triggered by a button, designed to provide contextual help in areas with limited screen space. Unlike traditional tooltips, toggletips can support interactive content, such as links.
Basic usage
Importing the component
To use the toggletip component, import it into your project.
import { DsToggletip } from "@coloplast/design-system";
Example usage
Here’s an example of how to implement a toggletip in your Vue template:
<DsToggletip
aria-label="Information about why we're asking this question"
link-target="_blank"
link-text="Learn more"
link-url="https://google.com"
title="Did you know?"
text="The component defaults provide the recommended experience, only set the props you need."
></DsToggletip>
The component comes with sensible defaults, so only the necessary props need to be configured for your specific use case.
Component playground and props
Explore and test the various props of the toggletip component in the Storybook playground to see how they affect its behaviour and appearance.
Accessibility
- The button that triggers the toggletip has an aria-label to describe its purpose.
- The toggletip content is only available to screen readers when the button is toggled, ensuring it is not read out prematurely.
- Both the button and the toggletip content are fully keyboard accessible, allowing users to navigate and interact with the content using keyboard controls.
Internationalisation
The toggletip supports internationalisation, including RTL rendering and customisable labels and text through props.