Tooltip

The Tooltip component from Superset's UI library.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Tooltip title="This is a helpful tooltip">
      <Button>Hover me</Button>
    </Tooltip>
  );
}

Result

Loading...

Placements

Live Editor

function Placements() {
  const placements = ['top', 'bottom', 'left', 'right', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'];
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
      {placements.map(placement => (
        <Tooltip key={placement} title={placement} placement={placement}>
          <Button>{placement}</Button>
        </Tooltip>
      ))}
    </div>
  );
}

Result

Loading...

Trigger Types

Live Editor

function Triggers() {
  return (
    <div style={{ display: 'flex', gap: 12 }}>
      <Tooltip title="Hover trigger" trigger="hover">
        <Button>Hover</Button>
      </Tooltip>
      <Tooltip title="Click trigger" trigger="click">
        <Button>Click</Button>
      </Tooltip>
      <Tooltip title="Focus trigger" trigger="focus">
        <Button>Focus</Button>
      </Tooltip>
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
title	string	"Simple tooltip text"	Text or content shown in the tooltip.
mouseEnterDelay	number	0.1	Delay in seconds before showing the tooltip on hover.
mouseLeaveDelay	number	0.1	Delay in seconds before hiding the tooltip after mouse leave.

Import

import { Tooltip } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.