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

<Tooltip text="Search across all your accounts">
  <Button>Search</Button>
</Tooltip>

With placementType

<Tooltip
  text="Explore your metrics, events and logs"
  placementType={Tooltip.PLACEMENT_TYPE.BOTTOM}
>
  <Button>Query your data</Button>
</Tooltip>

With additional info link

function render() {
  const additionalInfoLink = {
    label: 'See the docs',
    to: 'https://docs.newrelic.com',
  };


  return (
    <p>
      Welcome to
      <Tooltip
        text="Go to docs for more information"
        placementType={Tooltip.PLACEMENT_TYPE.BOTTOM}
        additionalInfoLink={additionalInfoLink}
      >
        New Relic One
      </Tooltip>
    </p>
  );
}

Props

additionalInfoLink

shape

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

label

REQUIRED

string

onClick

function

Callback fired any time the user clicks on the button.

function (event: React.MouseEvent 
)

to

shape|string

Location object or url string to link to.

shape

pathname

REQUIRED

string

search

string

hash

string

children

REQUIRED

node

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.

placementType

enum

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 ofTooltip.PLACEMENT_TYPE.BOTTOM,
Tooltip.PLACEMENT_TYPE.LEFT,
Tooltip.PLACEMENT_TYPE.RIGHT,
Tooltip.PLACEMENT_TYPE.TOP,
>

testId

string

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

text

REQUIRED

string

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.

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic

With placementType

With additional info link

Props

shape

shape

REQUIRED

string

function

shape|string

shape

REQUIRED

string

string

string

REQUIRED

node

enum

string

REQUIRED

string

Usage