import { Placement } from '../../../Types/Placement'; import { Trigger } from '../../../Types/Trigger'; import { CustomElement } from '../../Abstracts/CustomElement'; import { IToggleTipElementProps } from './IToggleTipElementProps'; declare const ToggleTipElement_base: (abstract new (...args: Array) => import("../../../Behaviors/Themeable").IThemeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Disableable").IDisableableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Sizeable").ISizeableProps) & (abstract new (...args: Array) => import("../../../Behaviors/TextFormattable").ITextFormattableProps) & (abstract new (...args: Array) => import("../../../Behaviors/Dimensionable").IDimensionableProps) & typeof CustomElement & import("../../../Behaviors/Themeable").IThemeableCtor; /** * ToggleTip - An interactive icon that displays contextual help content in a toggleable tooltip. * * @description * The ToggleTip element combines an information icon with a tooltip to provide on-demand help and * context. Unlike standard tooltips that appear on hover, toggletips are explicitly triggered and * can remain visible while users interact with the content. Supports various trigger modes (hover, * click, focus), placement options, delays, and customizable offset positioning. The icon automatically * uses the info-circle icon but can be customized via CSS. Ideal for inline help, form field * explanations, and feature descriptions that users can access without leaving their current context. * * @name ToggleTip * @element mosaik-toggletip * @category Primitives * * @csspart tooltip - The tooltip component container * * @cssprop {String} --toggle-tip-background-color - The tip background color CSS custom property. * @cssprop {String} --toggle-tip-font-family - The tip font family CSS custom property. * @cssprop {String} --toggle-tip-font-letter-spacing - The tip font letter spacing CSS custom property. * @cssprop {String} --toggle-tip-font-line-height - The tip font line height CSS custom property. * @cssprop {String} --toggle-tip-font-size - The tip font size CSS custom property. * @cssprop {String} --toggle-tip-font-text-decoration - The tip font text decoration CSS custom property. * @cssprop {String} --toggle-tip-font-text-transform - The tip font text transform CSS custom property. * @cssprop {String} --toggle-tip-font-weight - The tip font weight CSS custom property. * @cssprop {String} --toggle-tip-foreground-color - The tip foreground color CSS custom property. * @cssprop {String} --toggle-tip-gap - The tip gap CSS custom property. * @cssprop {String} --toggle-tip-padding-bottom - The tip padding bottom CSS custom property. * @cssprop {String} --toggle-tip-padding-left - The tip padding left CSS custom property. * @cssprop {String} --toggle-tip-padding-right - The tip padding right CSS custom property. * @cssprop {String} --toggle-tip-padding-top - The tip padding top CSS custom property. * @cssprop {String} --toggle-tip-shadow - The tip shadow CSS custom property. * @cssprop {String} --toggle-tip-shadow-blur - The tip shadow blur CSS custom property. * @cssprop {String} --toggle-tip-shadow-color - The tip shadow color CSS custom property. * @cssprop {String} --toggle-tip-shadow-offset-x - The tip shadow offset x CSS custom property. * @cssprop {String} --toggle-tip-shadow-offset-y - The tip shadow offset y CSS custom property. * @cssprop {String} --toggle-tip-shadow-spread - The tip shadow spread CSS custom property. * @cssprop {String} --toggle-tip-transition-duration - The tip transition duration CSS custom property. * @cssprop {String} --toggle-tip-transition-mode - The tip transition mode CSS custom property. * @cssprop {String} --toggle-tip-transition-property - The tip transition property CSS custom property. * @cssprop {String} --toggle-tip-translate - The tip translate CSS custom property. * @cssprop {Color} --toggletip-background-color - Background color of the toggletip * @cssprop {Color} --toggletip-foreground-color - Foreground color of the toggletip * @cssprop {String} --toggletip-padding-bottom - Padding bottom of the toggletip * @cssprop {String} --toggletip-padding-left - Padding left of the toggletip * @cssprop {String} --toggletip-padding-right - Padding right of the toggletip * @cssprop {String} --toggletip-padding-top - Padding top of the toggletip * * @dependency mosaik-icon - The Icon element. * @dependency mosaik-tooltip - The Tooltip element. * * @example * Basic toggletip with hover trigger: * ```html * * * ``` * * @example * Click-triggered toggletip that stays open: * ```html * * * ``` * * @example * Toggletip with custom positioning: * ```html * * * ``` * * @example * Toggletip with delays and custom formatting: * ```html * * * * * ``` * * @public */ export declare class ToggleTipElement extends ToggleTipElement_base implements IToggleTipElementProps { private _tooltipElement; private _content; private _placement; private _horizontalOffset; private _verticalOffset; private _isOpen; private _showDelay; private _hideDelay; private _trigger; private _staysOpen; /** * @public */ constructor(); /** * Returns the `is` property. * The `is` property represents natural name of this element. * * @public * @static * @readonly */ static get is(): string; /** * Gets or sets the `content` property. * * @public * @attr */ get content(): string; set content(value: string); /** * Gets or sets the `placement` property. * * @public * @attr */ get placement(): Placement; set placement(value: Placement); /** * Gets or sets the `horizontalOffset` property. * * @public * @attr */ get horizontalOffset(): number; set horizontalOffset(value: number); /** * Gets or sets the `verticalOffset` property. * * @public * @attr */ get verticalOffset(): number; set verticalOffset(value: number); /** * Gets or sets the `isOpen` property. * * @public * @attr */ get isOpen(): boolean; set isOpen(value: boolean); /** * Gets or sets the `showDelay` property. * * @public * @attr */ get showDelay(): number; set showDelay(value: number); /** * Gets or sets the `hideDelay` property. * * @public * @attr */ get hideDelay(): number; set hideDelay(value: number); /** * Gets or sets the `trigger` property. * * @public * @attr */ get trigger(): Trigger; set trigger(value: Trigger); /** * Gets or sets the `staysOpen` property. * * @public * @attr */ get staysOpen(): boolean; set staysOpen(value: boolean); /** * @public */ open(): void; /** * @public */ close(): void; /** * @protected * @override */ protected onApplyTemplate(): void; /** * @protected */ protected onOpened(): void; /** * @protected */ protected onClosed(): void; } /** * @public */ export declare namespace ToggleTipElement { type Props = IToggleTipElementProps; } /** * @public */ declare global { interface HTMLElementTagNameMap { 'mosaik-toggletip': ToggleTipElement; } } export {}; //# sourceMappingURL=ToggleTipElement.d.ts.map