import { StoryWithControls } from '../../../src/components/StorybookWrapper';

Tooltip

The Tooltip component from Superset's UI library.

Live Example

<StoryWithControls component="Tooltip" props={{ title: "Simple tooltip text", mouseEnterDelay: 0.1, mouseLeaveDelay: 0.1 }} controls={[ { name: "title", label: "Title", type: "text", description: "Text or content shown in the tooltip." }, { name: "mouseEnterDelay", label: "Mouse Enter Delay", type: "number", description: "Delay in seconds before showing the tooltip on hover." }, { name: "mouseLeaveDelay", label: "Mouse Leave Delay", type: "number", description: "Delay in seconds before hiding the tooltip after mouse leave." }, { name: "placement", label: "Placement", type: "select", options: [ "bottom", "bottomLeft", "bottomRight", "left", "leftBottom", "leftTop", "right", "rightBottom", "rightTop", "top", "topLeft", "topRight" ], description: "Position of the tooltip relative to the trigger element." }, { name: "trigger", label: "Trigger", type: "select", options: [ "hover", "focus", "click", "contextMenu" ], description: "How the tooltip is triggered." }, { name: "color", label: "Color", type: "color", description: "Custom background color for the tooltip." } ]} sampleChildren={[{"component":"Button","props":{"children":"Hover me"}}]} />

Try It

Edit the code below to experiment with the component:

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

Placements

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>
  );
}

Trigger Types

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>
  );
}

Props

Import

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

:::tip[Improve this page] This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file. :::