• /
  • Log in

Tooltip

Tooltips are used to expose additional information not readily available in the UI. You can use them to explain what a UI element is, explain the purpose of an action, or provide a definition of a word or phrase.

Usage

import { Tooltip } from 'nr1'

Examples

Props

additionalInfoLinkshape

The information shown in the text can be complemented/extended with a link to documentation. This link should only be used to provide contextual information.

shape

labelrequiredstring
onClickfunction

Callback fired any time the user clicks on the link.

function (
event: React.MouseEvent
)
toshape|string

Location object or url string to link to.

shape

pathnamerequiredstring
searchstring
hashstring
childrenrequirednode

Element to attach the tooltip to, hovering or focusing on this element will show the tooltip.

We recommend passing a focusable element so screen readers can announce the tooltip content.

placementTypeenum
DEFAULT
Tooltip.PLACEMENT_TYPE.TOP

Tooltips appear next to the element, action, word, or phrase they are explaining. Default display is from the top, but you can also choose to display it from the right, bottom, or left.

<One of
Tooltip.PLACEMENT_TYPE.BOTTOM,
Tooltip.PLACEMENT_TYPE.LEFT,
Tooltip.PLACEMENT_TYPE.RIGHT,
Tooltip.PLACEMENT_TYPE.TOP,
>
testIdstring

Adds a data-test-id attribute.

Use it to target the component in unit and e2e tests.

textrequiredstring

Tooltips should answer a question for the user. Tips should be crisp, clear, and helpful. Provide just enough information to answer questions without overloading the user.

  • Keep the copy easy to read and clear. For longer copy, use complete sentences, active verbs, and punctuation.
  • Give enough information to avoid misunderstandings. For example, if a button looks like it could add multiple things, use the tooltip to clarify what it actually adds.
Create issueEdit page
Copyright © 2021 New Relic Inc.