import { PropertyValueMap } from 'lit'; import { PopupPlacement } from '../../common/types'; import { DdsElement } from '../../internal/dds-hu-element'; export type TooltipMode = 'tooltip' | 'toggle'; /** * `dap-ds-tooltip` * @summary A tooltip is a container for tooltip content. * @element dap-ds-tooltip * @title - Tooltip * * @slot - The content of the tooltip. * @slot trigger - The trigger element of the tooltip. * * @csspart base - The main tooltip container. * @csspart trigger - The trigger element of the tooltip. * @csspart popup - The popup of the tooltip. * @csspart arrow - The arrow of the tooltip. * * @cssproperty --dds-tooltip-max-width - The maximum width of the tooltip before its content will wrap (default: 14rem) * @cssproperty --dds-tooltip-padding - The padding inside the tooltip (default: var(--dds-spacing-400)) * @cssproperty --dds-tooltip-border-color - The border color of the tooltip (default: var(--dds-border-neutral-subtle)) * @cssproperty --dds-tooltip-bg-color - The background color of the tooltip (default: var(--dds-background-neutral-base)) * @cssproperty --dds-tooltip-text-color - The text color of the tooltip (default: var(--dds-text-neutral-base)) * @cssproperty --dds-tooltip-font-size - The font size of the tooltip text (default: var(--dds-font-sm)) * @cssproperty --dds-tooltip-box-shadow - The box shadow of the tooltip (default: 0 8px 12px -2px rgb(0 0 0 / 8%), 0 2px 6px -2px rgb(0 0 0 / 6%)) */ export default class DapDSTooltip extends DdsElement { static readonly styles: import('lit').CSSResult; /** The content of the tooltip, supporting text only. */ content: string; /** The position of the tooltip around the trigger element. * @type { 'top' | 'right' | 'bottom' | 'left' } */ placement: PopupPlacement; /** Sets the tooltip to opened by default (will still be closed on closing events). */ opened?: boolean | undefined; /** Sets the tooltip to toggle mode. * @type { 'tooltip' | 'toggle' } */ mode?: TooltipMode; /** Hides the arrow of the tooltip. */ noArrow?: boolean | undefined; /** The floating strategy of the tooltip. Default is `absolute`. Can be `absolute` or `fixed`. * @type { 'absolute' | 'fixed' } */ floatingStrategy: 'absolute' | 'fixed'; /** Whether to keep popup open when trigger leaves viewport. */ disableViewportAutoClose: boolean; private _trigger; /** Sets custom trigger event (hover, focus, click). Default is `hover focus`. */ set trigger(value: string); get trigger(): string; /** @ignore */ mouseOverTooltip: boolean; connectedCallback(): void; disconnectedCallback(): void; protected firstUpdated(_changedProperties: PropertyValueMap | Map): void; showTooltip(): Promise; hideTooltip(): Promise; private readonly handleBlur; private readonly handleClick; private readonly handleFocus; private readonly handleMouseOver; private readonly handleMouseOut; private readonly hasTrigger; render(): import('lit-html').TemplateResult; }