Tooltip
Importing
Add rh-tooltip to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
</script>To learn more about installing RHDS elements on your site using an import map read our getting started docs.
Usage
<rh-tooltip>
<rh-button>Tooltip</rh-button>
<span slot="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Mi eget mauris pharetra et ultrices.</span>
</rh-tooltip>
<script type="module">
import '@rhds/elements/rh-button/rh-button.js';
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
</script>rh-tooltip
A tooltip is a floating text area that provides helpful or contextual information on hover, focus, or tap.
| Slot Name | Description |
|---|---|
|
Place invoking element here, i.e. the element which when hovered the tooltip will display. Must be inline content. |
content |
Place tooltip content here. Overrides the |
| CSS Property | Description | Default |
|---|---|---|
--rh-tooltip-arrow-size |
11px
|
|
--rh-tooltip-content-background-color |
#ffffff
|
|
--rh-tooltip-content-color |
#151515
|
|
--rh-tooltip-max-width |
18.75rem
|
|
--rh-tooltip-content-padding-block-start |
16px
|
|
--rh-tooltip-content-padding-inline-end |
16px
|
|
--rh-tooltip-content-padding-block-end |
16px
|
|
--rh-tooltip-content-padding-inline-start |
16px
|
|
--rh-tooltip-content-font-size |
0.875rem
|
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-box-shadow-sm
|
|
--rh-color-surface-darkest
|
|
--rh-color-surface-lightest
|
|
--rh-color-text-primary-on-dark
|
|
--rh-color-text-primary-on-light
|
|
--rh-font-size-body-text-sm
|
|
--rh-line-height-body-text
|
|
--rh-space-lg
|
|
