Calcite Tooltips are small text-based components that when triggered by a hover state, provide context to the user.


Tooltip Manager was deprecated in beta.82. In earlier releases, Tooltip must have a parent element of Tooltip Manager.

Tooltips float over other elements in the z-axis and provide text to quickly assist the user to understand context, actions, and other elements. A Tooltip can be a helpful UX device to give the user clarity before committing to an action. Avoid relying heavily on Tooltips, as you should prefer headers and labels that accurately describe a workflow.

Tooltip positioning can be automatic or manually set to avoid clipping in the interface.

For more robust floating messaging, consider Popover.

For more advanced floating workflows, refer to Modal.


  • General helper text
  • Succinct action hints


Show code snippetCopy code snippet
Edit sample on Codepen
Toggle preview themeToggle preview direction

Best practices

Below are important guidelines on using the Tooltip component.

Correct Tooltip directional
Do use directional props based on the placement of the item generating the Tooltip.
Avoid Tooltip directional
Avoid using directional props that could make the Tooltip fall off of the interface.

Writing and copy

Correct Tooltip content length
Do use Tooltips as brief text helpers. Prefer brevity.
Avoid Tooltip content length
Avoid using Tooltips with more than one sentence or 75 characters. Prefer Popover or Modal for more content.
Correct Tooltip helpful
Do use actionable verbiage when applicable.
Avoid Tooltip not helpful
Avoid being vague or baiting with Tooltips.
Correct Tooltip punctuation
Do put helpful statements in Tooltips.
Avoid Tooltip punctuation
Avoid having questions in Tooltips.
Correct Tooltip add
Do use Tooltips to properly describe a contextual problem.
Avoid Tooltip add
Avoid redundancy with Tooltips.
  • Tooltip text should be succinct and straight to the point
  • Periods are not necessary for ending Tooltip text
  • Avoid contractions in Tooltips (you're, aren't, don't, can't) to avoid confusion and to assist with internationalized reading
  • For longer content, please consider Popover.
  • Recommended character maximum: 75

API reference




Closes the `calcite-tooltip` when the `referenceElement` is clicked.

booleanA boolean property should be present, or not

Accessible name for the `calcite-tooltip`.

stringA custom string

Offset the position of the `calcite-tooltip` away from the `referenceElement`.

numberA number
6 (default)

Offset the position of the `calcite-tooltip` along the `referenceElement`.

numberA number
0 (default)

When true, the `calcite-tooltip` is open.

booleanA boolean property should be present, or not

Describes the positioning type to use for the overlaid content. If the `referenceElement` is in a fixed container, use the "fixed" value.

typedChoose from a set of typed values
absolute (default)fixed

Determines where the component will be positioned relative to the `referenceElement`.

typedChoose from a set of typed values
View documentation

The `referenceElement` to position `calcite-tooltip` according to its "placement" value. Setting to the `HTMLElement` is preferred so `calcite-tooltip` does not need to query the DOM for the `referenceElement`. However, a string ID of the reference element can be used.

elementAn element



Updates the position of the component.

reposition() => Promise<void>Promise<void>


default (unnamed)

A slot for adding text.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.