Tooltip

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

Overview

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.

Usage

  • General helper text
  • Succinct action hints

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
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

calcite-tooltip
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
closeOnClickclose-on-click

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

booleanA boolean property should be present, or not
truefalse
labellabel

Accessible name for the `calcite-tooltip`.

required
stringA custom string
undefined
offsetDistanceoffset-distance

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

numberA number
6 (default)
offsetSkiddingoffset-skidding

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

numberA number
0 (default)
openopen

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

booleanA boolean property should be present, or not
truefalse
overlayPositioningoverlay-positioning

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
placementplacement

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

typedChoose from a set of typed values
View documentation
referenceElementreference-element

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

Methods

NameDescriptionSignatureReturns
reposition

Updates the position of the component.

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

Slots

NameDescription
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.