Examples
Examples
Basic usage
To render a Tooltip, place the target as a child element and provide values to the Tooltip according to the API documentation.
Tooltip with rich content
If you want to place markup inside a tooltip you can use the content slot
Make it follow the cursor
A Tooltip can follow the cursor on the y-axis when it is displayed before or after the target and on the x-axis when it is positioned above or below.
Make it follow the target
A Tooltip can follow the provided target when its position is changing.
☝️ Watch out
To follow the target accurately, the Tooltip updates its position continuously which might cause performance issues when used extensively.
Make it unreachable
By default, Tooltips can be reached by mouse to allow users to select and copy their content or interact with elements inside of them. In rare cases Tooltips that stick around overlaying other important elements that should be accessible as soon as a user moves their cursor out of the Tooltip's target.
Best Practice:
- Tooltips should only become unreachable for users when they are overlaying important content that otherwise would not be accessible
Changing the distance
The distance between the Tooltip and its target can be increased or decreased to better align it with other elements or achieve the desired white space.
Updating the content
The content of a visible Tooltip might change based on an event or interactions during its lifetime. The Tooltip automatically updates its position anytime the content, by property or slot, changes. Additionally calling update() on a Tooltip instance allows it to recalculate its position based on its new dimensions if needed.
Control the visibility
By default, a Tooltips visibility changes automatically on hover and focus gesture on the provided target. There are situations that require the visibility of a Tooltip to be controlled using a different signal or logic.
Using controlled in conjunction with visibleallows the Tooltip to be fully remote-controlled from outside.
💡 Pro Tip
When a Tooltip is set to be controlled it won't react to the hover and focus gesture on the target anymore. If a Tooltip should still react to hover gestures while its visibility is controlled, the controlledshould not be set.
Change its appearance
By default, Tooltip adapts to a light mode environment and appears light itself. In a dark mode environment, we recommend changing the Tooltips appearance to dark instead.
The appearance of a Tooltip can be set using the appearance property or by nesting it into a cosmos-mode component. Read more about the Mode & Appearance concept.