@synergy-design-system/angular/components/tooltip/index.d.ts

Angular wrappers for the Synergy Design System

import * as i0 from '@angular/core';
import { ElementRef, NgZone, EventEmitter } from '@angular/core';
import { SynTooltip, SynShowEvent, SynAfterShowEvent, SynHideEvent, SynAfterHideEvent } from '@synergy-design-system/components';
export { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent } from '@synergy-design-system/components';

/**
 * @summary Tooltips display additional information based on a specific action.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
 * @status stable
 * @since 2.0
 *
 * @dependency syn-popup
 *
 * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
 * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
 *
 * @event syn-show - Emitted when the tooltip begins to show.
 * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
 * @event syn-hide - Emitted when the tooltip begins to hide.
 * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
 *
 * @csspart base - The component's base wrapper, an `<syn-popup>` element.
 * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
 * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
 * @csspart body - The tooltip's body where its content is rendered.
 *
 * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
 * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
 * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
 *
 * @animation tooltip.show - The animation to use when showing the tooltip.
 * @animation tooltip.hide - The animation to use when hiding the tooltip.
 */
declare class SynTooltipComponent {
    nativeElement: SynTooltip;
    private _ngZone;
    constructor(e: ElementRef, ngZone: NgZone);
    /**
     * The tooltip's content.
     * If you need to display HTML, use the `content` slot instead.
     */
    set content(v: SynTooltip['content']);
    get content(): SynTooltip['content'];
    /**
  * The preferred placement of the tooltip.
  * Note that the actual placement may vary as needed to keep the tooltip
  inside of the viewport.
   */
    set placement(v: SynTooltip['placement']);
    get placement(): SynTooltip['placement'];
    /**
     * Disables the tooltip so it won't show when triggered.
     */
    set disabled(v: '' | SynTooltip['disabled']);
    get disabled(): SynTooltip['disabled'];
    /**
     * The distance in pixels from which to offset the tooltip away from its target.
     */
    set distance(v: SynTooltip['distance']);
    get distance(): SynTooltip['distance'];
    /**
     * Indicates whether or not the tooltip is open.
     * You can use this in lieu of the show/hide methods.
     */
    set open(v: '' | SynTooltip['open']);
    get open(): SynTooltip['open'];
    /**
     * The distance in pixels from which to offset the tooltip along its target.
     */
    set skidding(v: SynTooltip['skidding']);
    get skidding(): SynTooltip['skidding'];
    /**
  * Controls how the tooltip is activated.
  * Possible options include `click`, `hover`, `focus`, and `manual`.
  * Multiple
  options can be passed by separating them with a space.
  * When manual is used, the tooltip must be activated
  programmatically.
   */
    set trigger(v: SynTooltip['trigger']);
    get trigger(): SynTooltip['trigger'];
    /**
  * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
  `overflow: auto|hidden|scroll`.
  * Hoisting uses a fixed positioning strategy that works in many, but not all,
  scenarios.
   */
    set hoist(v: '' | SynTooltip['hoist']);
    get hoist(): SynTooltip['hoist'];
    /**
     * Emitted when the tooltip begins to show.
     */
    synShowEvent: EventEmitter<SynShowEvent>;
    /**
     * Emitted after the tooltip has shown and all animations are complete.
     */
    synAfterShowEvent: EventEmitter<SynAfterShowEvent>;
    /**
     * Emitted when the tooltip begins to hide.
     */
    synHideEvent: EventEmitter<SynHideEvent>;
    /**
     * Emitted after the tooltip has hidden and all animations are complete.
     */
    synAfterHideEvent: EventEmitter<SynAfterHideEvent>;
    static ɵfac: i0.ɵɵFactoryDeclaration<SynTooltipComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<SynTooltipComponent, "syn-tooltip", never, { "content": { "alias": "content"; "required": false; }; "placement": { "alias": "placement"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "distance": { "alias": "distance"; "required": false; }; "open": { "alias": "open"; "required": false; }; "skidding": { "alias": "skidding"; "required": false; }; "trigger": { "alias": "trigger"; "required": false; }; "hoist": { "alias": "hoist"; "required": false; }; }, { "synShowEvent": "synShowEvent"; "synAfterShowEvent": "synAfterShowEvent"; "synHideEvent": "synHideEvent"; "synAfterHideEvent": "synAfterHideEvent"; }, never, ["*"], true, never>;
}

export { SynTooltipComponent };