Tooltip
<cs-tooltip>
Tooltips display brief contextual information when the user hovers, focuses, or taps a target element.
Point the for attribute at the id of the element the tooltip describes, and Cornerstone wires up positioning and accessibility for you.
Keep tooltips to text and presentational content.
Tooltips can’t be reliably focused or operated with a keyboard, so avoid buttons, links, and form controls inside one. Reach for a popover or dropdown when you need interactive content.
Examples
Placement
Use the placement attribute to set the tooltip’s preferred position. The actual placement may shift to keep the tooltip inside the viewport.
Triggers
The trigger attribute controls how a tooltip is activated. Pass multiple values separated by a space to combine them — the default is hover focus, which shows the tooltip on pointer hover and keyboard focus.
| Value | Shows the tooltip when |
|---|---|
hover | The pointer moves over the target |
focus | The target receives keyboard focus |
click | The target is clicked; clicking again dismisses it |
manual | Only when you set open yourself — no built-in activation |
HTML in Tooltips
Use the default slot to add presentational HTML, such as emphasis or line breaks.
Customizing
Use the --max-width custom property to set the width at which the tooltip’s content wraps.
Remove the arrow on a single tooltip with the without-arrow attribute.
Resize the arrow on every tooltip with the --cs-tooltip-arrow-size design token. Set it in a :root block after the Cornerstone stylesheet loads — 0 removes arrows globally.
:root { --cs-tooltip-arrow-size: 0; }
Showing & Hiding Manually
Set trigger="manual" and toggle the open attribute to control the tooltip yourself — handy for onboarding hints or surfacing a tooltip in response to your own logic.
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.
import '@cruglobal/cornerstone-components/components/tooltip/tooltip.js';
import './cornerstone/components/tooltip/tooltip.js';
import CsTooltip from '@cruglobal/cornerstone-components/react/tooltip/index.js';
Slots
Learn more about using slots.
| Name | Description |
|---|---|
| (default) | The tooltip's default slot where any content should live. Interactive content should be avoided. |
Attributes & Properties
Learn more about attributes and properties.
| Property | Attribute | Description | Type | Default | Reflects |
|---|---|---|---|---|---|
disabled | disabled | Disables the tooltip so it won't show when triggered. | boolean | false | Yes |
distance | distance | The distance in pixels from which to offset the tooltip away from its target. | number | 8 | — |
hideDelay | hide-delay | The amount of time to wait before hiding the tooltip when the user mouses out. | number | 0 | — |
open | open | Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. | boolean | false | Yes |
placement | placement | The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport. | 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'top' | — |
showDelay | show-delay | The amount of time to wait before showing the tooltip when the user mouses in. | number | 150 | — |
skidding | skidding | The distance in pixels from which to offset the tooltip along its target. | number | 0 | — |
trigger | trigger | Controls how the tooltip is activated. Possible options include click, hover, focus, and manual. Multiple options can be passed by separating them with a space. When manual is used, the tooltip must be activated programmatically. | string | 'hover focus' | — |
withoutArrow | without-arrow | Removes the arrow from the tooltip. | boolean | false | Yes |
Methods
Learn more about methods.
| Name | Description | Arguments |
|---|---|---|
hide() | Hides the tooltip | — |
show() | Shows the tooltip. | — |
Events
Learn more about events.
| Name | Description |
|---|---|
cs-after-hide | Emitted after the tooltip has hidden and all animations are complete. |
cs-after-show | Emitted after the tooltip has shown and all animations are complete. |
cs-hide | Emitted when the tooltip begins to hide. |
cs-show | Emitted when the tooltip begins to show. |
CSS Custom Properties
Learn more about CSS custom properties.
| Name | Description | Default |
|---|---|---|
--max-width | The maximum width of the tooltip before its content will wrap. | — |
CSS Parts
Learn more about CSS parts.
| Name | Description | CSS selector |
|---|---|---|
body | The tooltip's body where its content is rendered. | ::part(body) |
tooltip | The component's outer wrapper. | ::part(tooltip) |
tooltip__arrow | The popup's exported arrow part. Use this to target the tooltip's arrow. | ::part(tooltip__arrow) |
tooltip__popup | The popup's exported popup part. Use this to target the tooltip's popup container. | ::part(tooltip__popup) |
Dependencies
This component automatically imports the following elements. Sub-dependencies, if any exist, are included in this list.