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

No CSS parts available.