Tooltip webcomponent - DÁP Szolgáltatások

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'

Attributes

Property	Type	Default	Description
`content`	`string`		The content of the tooltip, supporting text only.
`placement`	`'top'`, `'right'` , `'bottom'` , `'left'`	`'bottom'`	The position of the tooltip around the trigger element.
`opened`	`boolean`	`false`	Sets the tooltip to opened by default (will still be closed on closing events).
`mode`	`'tooltip'`, `'toggle'`	`'tooltip'`	Sets the tooltip to toggle mode.
`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`.
`trigger`			Sets custom trigger event (hover, focus, click). Default is `hover focus`.

Slots

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

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.

CSS Custom Properties

Property Name	Description
`--dds-tooltip-max-width`	The maximum width of the tooltip before its content will wrap.
`--dds-tooltip-padding`	The padding inside the tooltip.
`--dds-tooltip-border-color`	The border color of the tooltip.
`--dds-tooltip-bg-color`	The background color of the tooltip.
`--dds-tooltip-text-color`	The text color of the tooltip.
`--dds-tooltip-font-size`	The font size of the tooltip text.
`--dds-tooltip-box-shadow`	The box shadow of the tooltip.