DÁP Design System - Tooltip webcomponent

Tooltip

Tooltip component is a small pop-up box that appears when a user hovers over an element or clicks on it. It provides additional information about the element or offers a call-to-action.

Examples

Default tooltip

<dap-ds-tooltip>
  <dap-ds-button slot="trigger">
    Hover me
  </dap-ds-button>
  Tooltip content
</dap-ds-tooltip>

Position

<div style={{ display: 'flex', minHeight: 200, justifyContent: 'center', alignItems: 'center' }}>
  <dap-ds-stack direction="row">
    <dap-ds-tooltip placement="top">
      <dap-ds-button slot="trigger">
        Top
      </dap-ds-button>
      Tooltip content
    </dap-ds-tooltip>
    <dap-ds-tooltip placement="right">
      <dap-ds-button slot="trigger">
        Right
      </dap-ds-button>
      Tooltip content
    </dap-ds-tooltip>
    <dap-ds-tooltip placement="bottom">
      <dap-ds-button slot="trigger">
        Bottom
      </dap-ds-button>
      Tooltip content
    </dap-ds-tooltip>
    <dap-ds-tooltip placement="left">
      <dap-ds-button slot="trigger">
        Left
      </dap-ds-button>
      Tooltip content
    </dap-ds-tooltip>
  </dap-ds-stack>
</div>

Trigger

<dap-ds-tooltip id="custom" trigger="click">
  <dap-ds-button slot="trigger">
    Click me
  </dap-ds-button>
  Tooltip content
</dap-ds-tooltip>

Importing

import { DapDSTooltip } from 'dap-design-system/dist/dds'

Importing React

import { DapDSTooltipReact } from 'dap-design-system/dist/react'

Slots

Name	Description
`(default)`	The content of the tooltip.
`trigger`	The trigger element of the tooltip.

Attributes

Property	Type	Default	Description
`content`	`string`		The content of the tooltip, supporting text only.
`placement`	`PopupPlacement`	`'bottom'`	The position of the tooltip around the trigger element. Default is `bottom`. Can be `top`, `right`, `bottom`, or `left`.
`disabled`	`boolean`		Disables the tooltip.
`opened`	`boolean`	`false`	Sets the tooltip to opened by default (will still be closed on closing events).
`mode`	`TooltipMode`	`'tooltip'`	Sets the tooltip to toggle mode. Default is `tooltip`. Can be `tooltip` or `toggle`.
`trigger`	`string`		Sets custom trigger event (hover, focus, click). Default is `hover focus`.
`noArrow`	`boolean`	`false`	Hides the arrow of the tooltip.
`floatingStrategy`	`'absolute' 'fixed'`	`'absolute'`	The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`.

Events

No custom events available.

CSS Parts

Part Name	Description
`base`	The main tooltip container.
`trigger`	The trigger element of the tooltip.
`popup`	The popup of the tooltip.
`arrow`	The arrow of the tooltip.