TooltipTrigger
The TooltipTrigger component is used to provide a trigger for the Tooltip component.
Component
Storybook
Storybook - TooltipTrigger DocumentationFigma Demo
Guidelines
- Use tooltips to provide concise and helpful information about a specific element.
- Tooltips should not contain critical information that users might miss.
- Keep the text brief and to the point.
Variations
- Placement: Specifies the position of the tooltip relative to the trigger element. Possible values include top, bottom, left, right.
Usage
The Tooltip component is composed of TooltipContainer
and TooltipTrigger
.
- TooltipContainer: Handles the possible layouts of the container based on the direction of TooltipTail.
- TooltipTrigger: One of two variants for how tooltips are exposed in the UI — either via an icon treatment or text treatment.
Designers only need to be concerned with using the Tooltip component in their screens.
Best Practices
- Consistency: Use the Tooltip component consistently across your application to provide a unified user experience.
- Testing: Utilize the
testId
prop for reliable testing and automation.
Component Specs
API
class:
string
| Default:null
Additional classes to add to the tooltip trigger.testId:
string
| Default:null
Test ID for the tooltip trigger.id:
string
| Default:null
ID for the tooltip trigger.size:
'default' | 'sm'
| Default:'default'
The size of the tooltip trigger.text:
string
| Default:null
The text to display in the tooltip trigger.variant:
'icon' | 'text'
| Default:'icon'
The type of tooltip trigger to render.
Example
<script>
import { TooltipTrigger, Tooltip } from '@getprovi/craft-svelte';
</script>
<TooltipTrigger id="icon-tooltip" />
<Tooltip triggeredBy="icon-tooltip">This is a tooltip</Tooltip>
<TooltipTrigger id="text-tooltip" variant="text" text="Text tooltip" />
<Tooltip triggeredBy="text-tooltip">This is a tooltip</Tooltip>
<TooltipTrigger id="custom-tooltip"> This is a custom trigger. </TooltipTrigger>
<Tooltip triggeredBy="custom-tooltip">
<span>This is a custom tooltip.</span>
<span>That has multiple lines.</span>
</Tooltip>
Types
interface SharedProps {
class?: string | null | undefined;
testId?: string;
id: string;
}
interface IconProps extends SharedProps {
variant?: 'icon';
size?: never;
text?: never;
}
interface TextProps extends SharedProps {
variant: 'text';
text: string;
size?: 'default' | 'sm';
}
type Props = IconProps | TextProps;