• /
  • Log in
  • Free account

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

Basic

1
<Tooltip text="Hello World!">Hover me</Tooltip>;

With placementType

1
<Tooltip text="Hello World!" placementType={Tooltip.PLACEMENT_TYPE.BOTTOM}>
2
Hover me
3
</Tooltip>;

With additional info link

1
function render() {
2
const additionalInfoLink = {
3
label: 'See the docs',
4
to: 'https://docs.newrelic.com',
5
};
6
7
return (
8
<Tooltip
9
text="Hello World!"
10
placementType={Tooltip.PLACEMENT_TYPE.BOTTOM}
11
additionalInfoLink={additionalInfoLink}
12
>
13
Hover me
14
</Tooltip>
15
);
16
}

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: Event
) => undefined
toshape|string

Location object or url string to link to.

shape

pathnamerequiredstring
searchstring
hashstring
childrenrequirednode

Element to attach the tooltip to.

Hovering over this element will trigger the tooltip.

classNamedeprecatedstring

Due July 1st, 2021

The "className" prop is deprecated; add "className" to the <Tooltip> children element instead.

Appends class names to the component.

Should be used only for positioning and spacing purposes.

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,
>
styledeprecatedobject

Due July 1st, 2021

The "style" prop is deprecated; add style to the <Tooltip> children element instead.

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id.

Used to target the component in unit and e2e testing.

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.

Methods

Tooltip.render

function () => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.