Tooltip

A popup that displays information on hover.

Basic Usage

dart
1
2
3
4
DTooltip(
  text: 'This is a tooltip',
  child: DButton(label: 'Hover me'),
)

Placements

dart
1
2
3
4
5
6
7
8
9
10
11
DTooltip(
  text: 'Top tooltip',
  placement: DTooltipPlacement.top,
  child: DButton(label: 'Top'),
)

DTooltip(
  text: 'Bottom tooltip',
  placement: DTooltipPlacement.bottom,
  child: DButton(label: 'Bottom'),
)

With Icon Button

dart
1
2
3
4
5
6
7
8
DTooltip(
  text: 'Delete item',
  child: DButton(
    leadingIcon: DIcon(name: DIconNames.trash),
    variant: DButtonVariant.ghost,
    color: DButtonColor.error,
  ),
)

With Delay

dart
1
2
3
4
5
DTooltip(
  text: 'This appears after 500ms',
  delayMs: 500,  // milliseconds
  child: DButton(label: 'Delayed'),
)

Information Tooltip

API Key
dart
1
2
3
4
5
6
7
8
9
10
11
div(classes: 'flex items-center gap-2', [
  span([Component.text('API Key')]),
  DTooltip(
    text: 'Your API key is used to authenticate requests',
    child: DIcon(
      name: DIconNames.info,
      size: DIconSize.sm,
      className: 'text-gray-400 cursor-help',
    ),
  ),
])