Tooltip

User-triggered messages that provide additional information about something on a page. Tooltips are accessed by hovering with a mouse or tapping on a touch screen.

children

<Button>Hover me</Button>

<Button>Hover me</Button>

tooltip

maxWidth

placement

showDelay

hideDelay

defaultOpen

className

import * as React from "react";
import { Tooltip, Button } from "@nulogy/components";

export default () => {
  return (
    <Tooltip tooltip="Tooltip!">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

import * as React from "react";
import { Tooltip, Button } from "@nulogy/components";

export default () => {
  return (
    <Tooltip tooltip="Tooltip!">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Use when

There is additional information that could be helpful to a user

Don't use when

The information contained is vital to completing a task

Variations

With non-text content

Usage Guidelines

The Tooltip component is only supported for Buttons and Links
Only add a Tooltip to other elements that are focusable

Props

Name	Type	Default	Description
children	react node		Trigger, must be a single child able to accept a ref.
tooltip	string		The content to display inside of the tooltip.
maxWidth	string	24em	Width of the tooltip.
placement	enum	bottom	The position of the tooltip relative to its trigger.
showDelay	number	100	Time in seconds before the tooltip appears.
hideDelay	number	350	Time in seconds before the tooltip disappears.
defaultOpen	boolean		when set to true the tooltip will be open by default
className	string		className passed to the tooltip container element.