Bifrost Design System

Tooltip

import Tooltip from "@intility/bifrost-react/Tooltip";

Rewritten in 5.0

Single child element

The nested content of <Tooltip> needs to be a single element able to hold a ref, unless an element reference is passed to the reference prop. It should work with most Bifrost components and default html elements.

Also see <Dropdown>

Default behaviour is to automatically only display the tooltip on hover.

<Tooltip content="Good job hovering!">
  <span>Hover me</span>
</Tooltip>

Hover me

To make it accessible for keyboard users, make sure to use a focusable element like <Button>.

<Tooltip content="The muffin man?!">
  <Button>Do you know?</Button>
</Tooltip>
<Tooltip
  state="neutral"
  content={
    <div>
      That you lost the game?
      <Icon icon={faHeartCrack} marginLeft />
    </div>
  }
>
  <Button variant="filled">Did you know?</Button>
</Tooltip>

Use variant='compact' for smaller tooltip

<Tooltip content="Good job hovering!" variant="compact">
  <span>Hover me</span>
</Tooltip>

Hover me

Visible state

Show/hide the tooltip with visible boolean prop.

import { useState } from "react";
import Tooltip from "@intility/bifrost-react/Tooltip";
import Button from "@intility/bifrost-react/Button";

export default function () {
  const [visible, setVisible] = useState(true);

  return (
    <Tooltip content="Click the button to toggle me!" visible={visible}>
      <Button onClick={() => setVisible(!visible)} style={{ margin: 0 }}>
        Some button
      </Button>
    </Tooltip>
  );
}

Open Sandbox

Placement

The placement prop allows you to set a preferred placement ("top" is default, see Floating UI docs for all options).

import { useState } from "react";
import { faFaceSmile } from "@fortawesome/free-regular-svg-icons";
import Tooltip from "@intility/bifrost-react/Tooltip";
import Checkbox from "@intility/bifrost-react/Checkbox";
import Icon from "@intility/bifrost-react/Icon";
import Badge from "@intility/bifrost-react/Badge";
import AutoCol from "@intility/bifrost-react/AutoCol";

const placements = ["top", "right", "bottom", "left"];

export default function () {
  const [placement, setPlacement] = useState(placements[0]);

  return (
    <AutoCol width={100}>
      <div style={{ width: "20%", display: "flex", flexDirection: "column" }}>
        {placements.map((p) => (
          <Checkbox
            type="radio"
            label={p}
            checked={placement === p}
            onChange={() => setPlacement(p)}
            key={p}
          />
        ))}
      </div>
      <div style={{ width: "80%", alignSelf: "center", paddingLeft: "8rem" }}>
        <Tooltip content="Tooltip text" placement={placement} visible={true}>
          <Badge>
            <Icon icon={faFaceSmile} />
          </Badge>
        </Tooltip>
      </div>
    </AutoCol>
  );
}

Open Sandbox

States

Other than the default state, there is also a more subtle 'neutral'.

<Tooltip content="Neutral tooltip" state="neutral">
  <span>Hover me</span>
</Tooltip>

Hover me

Tooltip

Basic Tooltip

Compact Tooltip

Visible state

Placement

States