Tooltip
Importing
Add rh-tooltip to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-tooltip/rh-tooltip.js';
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
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>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
rh-tooltip
A tooltip is a floating text area that provides helpful or contextual information on hover, focus, or tap.
Slot Name | Summary | 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 |
Attribute | DOM Property | Description | Type | Default |
---|---|---|---|---|
position |
position |
The position of the tooltip, relative to the invoking content |
|
|
content |
content |
Tooltip content. Overridden by the content slot |
|
|
Method Name | Description |
---|---|
show() |
Show the tooltip |
hide() |
Hide the tooltip |
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
|
|
--rh-tooltip-arrow-size |
/** deprecated: use --rh-tooltip-arrow-size */
var(--rh-tooltip__arrow--Width, 11px)
|
|
--rh-tooltip__arrow--Width |
deprecated: use --rh-tooltip-arrow-size |
11px
|
--rh-tooltip-max-width |
var(--rh-tooltip--MaxWidth, 18.75rem)
|
|
--rh-tooltip--MaxWidth |
18.75rem
|
|
--rh-tooltip-content-padding-block-start |
/** deprecated: use --rh-tooltip-content-padding-block-start */
var(--rh-tooltip__content--PaddingTop, var(--rh-space-lg, 16px))
|
|
--rh-tooltip__content--PaddingTop |
deprecated: use --rh-tooltip-content-padding-block-start |
var(--rh-space-lg, 16px)
|
--rh-tooltip-content-padding-inline-end |
/** deprecated: use --rh-tooltip-content-padding-inline-end */
var(--rh-tooltip__content--PaddingRight, var(--rh-space-lg, 16px))
|
|
--rh-tooltip__content--PaddingRight |
deprecated: use --rh-tooltip-content-padding-inline-end |
var(--rh-space-lg, 16px)
|
--rh-tooltip-content-padding-block-end |
/** deprecated: use --rh-tooltip-content-padding-block-end */
var(--rh-tooltip__content--PaddingBottom, var(--rh-space-lg, 16px))
|
|
--rh-tooltip__content--PaddingBottom |
deprecated: use --rh-tooltip-content-padding-block-end |
var(--rh-space-lg, 16px)
|
--rh-tooltip-content-padding-inline-start |
/** deprecated: use --rh-tooltip-content-padding-inline-start */
var(--rh-tooltip__content--PaddingLeft, var(--rh-space-lg, 16px))
|
|
--rh-tooltip__content--PaddingLeft |
deprecated: use --rh-tooltip-content-padding-inline-start |
var(--rh-space-lg, 16px)
|
--rh-tooltip-content-font-size |
/** deprecated: use --rh-tooltip-content-font-size */
var(--rh-tooltip__content--FontSize, var(--rh-font-size-body-text-sm, 0.875rem))
|
|
--rh-tooltip__content--FontSize |
deprecated: use --rh-tooltip-content-font-size |
var(--rh-font-size-body-text-sm, 0.875rem)
|
--rh-tooltip__content--Color |
deprecated: use --rh-tooltip-content-color |
var(--rh-color-text-primary-on-light, #151515)
|
--rh-tooltip-content-color |
var(--rh-color-text-primary-on-dark, #ffffff)
|
|
--rh-tooltip-content-background-color |
var(--rh-tooltip__content--BackgroundColor, var(--rh-color-surface-darkest, #151515))
|
|
--rh-tooltip__content--BackgroundColor |
var(--rh-color-surface-darkest, #151515)
|
Token | Copy |
---|---|
--rh-line-height-body-text
|
|
--rh-box-shadow-sm
|
|
--rh-border-radius-default
|
|
--rh-space-lg
|
|
--rh-font-size-body-text-sm
|
|
--rh-color-text-primary-on-light
|
|
--rh-color-text-primary-on-dark
|
|
--rh-color-surface-lightest
|
|
--rh-color-surface-darkest
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.