Skip to main content

​
DTooltip

A tooltip component for displaying helpful information on hover, focus, or click.

​
Import

import { DTooltip } from '@dynamic-framework/ui-react';

​
TypeScript Interface

export type Props = BaseProps & PropsWithChildren<{
  childrenClassName?: string;
  offSet?: number;
  padding?: number;
  withHover?: boolean;
  withFocus?: boolean;
  withClick?: boolean;
  open?: boolean;
  size?: ComponentSize;
  placement?: Placement;
  Component: ReactNode;
}>;

type ComponentSize = 'sm' | 'lg';
type Placement =
  | 'top'
  | 'top-start'
  | 'top-end'
  | 'right'
  | 'right-start'
  | 'right-end'
  | 'bottom'
  | 'bottom-start'
  | 'bottom-end'
  | 'left'
  | 'left-start'
  | 'left-end';

type BaseProps = {
  style?: CSSProperties;
  className?: string;
  dataAttributes?: DataAttributes;
};

​
Props

​
Component
ReactNode
required
The element that triggers the tooltip (what the user hovers over or clicks).
​
children
ReactNode
required
The content to display inside the tooltip.
​
childrenClassName
string
CSS classes to apply to the trigger element wrapper.
​
offSet
number
default:"6"
Distance in pixels between the tooltip and the trigger element.
​
padding
number
Padding in pixels for the shift middleware to prevent tooltip from touching viewport edges.
​
withHover
boolean
default:"true"
If true, tooltip shows on hover.
​
withFocus
boolean
default:"false"
If true, tooltip shows on focus.
​
withClick
boolean
default:"false"
If true, tooltip shows on click.
​
open
boolean
default:"false"
Initial open state of the tooltip.
​
size
'sm' | 'lg'
Size variant of the tooltip.
​
placement
Placement
default:"top"
Preferred placement of the tooltip relative to the trigger element. Options include 'top', 'right', 'bottom', 'left', and their -start and -end variants.
​
className
string
Additional CSS classes to apply to the tooltip.
​
style
CSSProperties
Inline styles to apply to the tooltip.

​
Usage Examples

​
Basic Tooltip

import { DTooltip, DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <DTooltip Component={<DButton text="Hover me" />}>
      This is a helpful tooltip!
    </DTooltip>
  );
}

​
Placement Variants

import { DTooltip, DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex gap-3 justify-content-center align-items-center" style={{ minHeight: '200px' }}>
      <DTooltip
        placement="top"
        Component={<DButton text="Top" size="sm" />}
      >
        Tooltip on top
      </DTooltip>

      <DTooltip
        placement="right"
        Component={<DButton text="Right" size="sm" />}
      >
        Tooltip on right
      </DTooltip>

      <DTooltip
        placement="bottom"
        Component={<DButton text="Bottom" size="sm" />}
      >
        Tooltip on bottom
      </DTooltip>

      <DTooltip
        placement="left"
        Component={<DButton text="Left" size="sm" />}
      >
        Tooltip on left
      </DTooltip>
    </div>
  );
}

​
Click to Show

import { DTooltip, DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <DTooltip
      withClick
      withHover={false}
      Component={<DButton text="Click me" />}
    >
      This tooltip appears on click!
    </DTooltip>
  );
}

​
Focus Trigger

import { DTooltip, DInput } from '@dynamic-framework/ui-react';
import { useState } from 'react';

export default function Example() {
  const [value, setValue] = useState('');

  return (
    <DTooltip
      withFocus
      withHover={false}
      Component={
        <DInput
          label="Username"
          value={value}
          onChange={setValue}
          placeholder="Enter username"
        />
      }
    >
      Username must be at least 3 characters
    </DTooltip>
  );
}

​
Size Variants

import { DTooltip, DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex gap-3">
      <DTooltip
        size="sm"
        Component={<DButton text="Small" size="sm" />}
      >
        Small tooltip
      </DTooltip>

      <DTooltip
        Component={<DButton text="Default" />}
      >
        Default tooltip
      </DTooltip>

      <DTooltip
        size="lg"
        Component={<DButton text="Large" size="lg" />}
      >
        Large tooltip with more space
      </DTooltip>
    </div>
  );
}

​
Custom Offset

import { DTooltip, DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex gap-3">
      <DTooltip
        offSet={2}
        Component={<DButton text="Close" size="sm" />}
      >
        Close tooltip
      </DTooltip>

      <DTooltip
        offSet={20}
        Component={<DButton text="Far" size="sm" />}
      >
        Far tooltip
      </DTooltip>
    </div>
  );
}

​
With Icons

import { DTooltip } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <div className="d-flex gap-3">
      <DTooltip
        Component={
          <button className="btn btn-link p-0">
            <i className="bi bi-info-circle" />
          </button>
        }
      >
        Click the info icon for more details
      </DTooltip>

      <DTooltip
        Component={
          <button className="btn btn-link p-0">
            <i className="bi bi-question-circle" />
          </button>
        }
      >
        Need help? Contact support
      </DTooltip>
    </div>
  );
}

​
Rich Content Tooltip

import { DTooltip, DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <DTooltip
      size="lg"
      Component={<DButton text="Hover for details" />}
    >
      <div>
        <strong>Pro Tip:</strong>
        <p className="mb-0 mt-1">You can use keyboard shortcuts to speed up your workflow.</p>
      </div>
    </DTooltip>
  );
}

​
Multiple Triggers

import { DTooltip, DButton } from '@dynamic-framework/ui-react';

export default function Example() {
  return (
    <DTooltip
      withHover
      withClick
      withFocus
      Component={<DButton text="Hover, Click, or Focus" />}
    >
      This tooltip shows on hover, click, and focus!
    </DTooltip>
  );
}

Build docs developers (and LLMs) love

Get started for freeTalk to us