Tooltip component is a small pop-up box that appears when a user hovers over an element or clicks on it. It provides additional information about the element or offers a call-to-action.
import { DapDSTooltip } from 'dap-design-system'
import { DapDSTooltipReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSTooltip } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
content | string | The content of the tooltip, supporting text only. | |
placement | 'top', 'right' , 'bottom' , 'left' | 'bottom' | The position of the tooltip around the trigger element. |
opened | boolean | false | Sets the tooltip to opened by default (will still be closed on closing events). |
mode | 'tooltip', 'toggle' | 'tooltip' | Sets the tooltip to toggle mode. |
noArrow | boolean | false | Hides the arrow of the tooltip. |
floatingStrategy | 'absolute', 'fixed' | 'absolute' | The floating strategy of the tooltip. Default is absolute. Can be absolute or fixed. |
trigger | Sets custom trigger event (hover, focus, click). Default is hover focus. |
| Name | Description |
|---|---|
(default) | The content of the tooltip. |
trigger | The trigger element of the tooltip. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main tooltip container. |
trigger | The trigger element of the tooltip. |
popup | The popup of the tooltip. |
arrow | The arrow of the tooltip. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-tooltip::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-tooltip::part(base),
.my-custom-dap-ds-tooltip::part(trigger) {
/* Shared styles */
}
Example usage:
<dap-ds-tooltip class="my-custom-dap-ds-tooltip">
Tooltip
</dap-ds-tooltip>
.my-custom-dap-ds-tooltip::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-tooltip-max-width | The maximum width of the tooltip before its content will wrap (default: 14rem) |
--dds-tooltip-padding | The padding inside the tooltip (default: var(--dds-spacing-400)) |
--dds-tooltip-border-color | The border color of the tooltip (default: var(--dds-border-neutral-subtle)) |
--dds-tooltip-bg-color | The background color of the tooltip (default: var(--dds-background-neutral-base)) |
--dds-tooltip-text-color | The text color of the tooltip (default: var(--dds-text-neutral-base)) |
--dds-tooltip-font-size | The font size of the tooltip text (default: var(--dds-font-sm)) |
--dds-tooltip-box-shadow | The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%)) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-tooltip
style="--dds-tooltip-max-width: value; --dds-tooltip-padding: value;">
Tooltip
</dap-ds-tooltip>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-tooltip {
--dds-tooltip-max-width: value;
--dds-tooltip-padding: value;
--dds-tooltip-border-color: value;
}
<dap-ds-tooltip class="my-custom-dap-ds-tooltip">
Tooltip
</dap-ds-tooltip>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-tooltip {
--dds-tooltip-max-width: value;
--dds-tooltip-padding: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
