dap-design-system
Version:
Official design system for the DÁP (dap.gov.hu)
73 lines (72 loc) • 3.31 kB
TypeScript
import { PropertyValueMap } from 'lit';
import { PopupPlacement } from '../../common/types';
import { DdsElement } from '../../internal/dds-hu-element';
import { default as DapDSPopup } from '../popup/popup.component';
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 tagName: string;
static dependencies: {
'dap-ds-popup': typeof DapDSPopup;
};
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<any> | Map<PropertyKey, unknown>): void;
showTooltip(): Promise<void>;
hideTooltip(): Promise<void>;
private readonly handleBlur;
private readonly handleClick;
private readonly handleFocus;
private readonly handleMouseOver;
private readonly handleMouseOut;
private readonly hasTrigger;
render(): import('lit-html').TemplateResult;
}