Tooltip
On this page
On this page
Installation
We recommend import maps when building pages with RHDS. Learn more about how to install on our getting started docs.
<script type="importmap">
{
"imports": {
"@rhds/elements/": "https://www.redhatstatic.com/dx/v1-alpha/@rhds/elements@2.1.2/elements/",
}
}
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
npm install @rhds/elements
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
<script type="importmap">
Could not generate import map using JSPM: Cannot read properties of undefined (reading '@rhds/elements')
</script>
Copy to Clipboard
Copied!
Wrap lines
Overflow lines
Add it 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
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 | 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
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.