import { Cre8Element } from '../cre8-element';
/**
 * The purpose of tooltips is to provide a tip or hint about what a tool, icon, link, or other interaction does.
 * If you need to present a call to action with perhaps a button for the user to click, then use
 * [Popover](/docs/cre8-components-popover--docs) instead.
 *
 * ##Tooltip Styles
 * There are 4 alignment options for Tooltips: Top, Bottom, Right, and Left. Default placement is Bottom, below the
 * element it is describing. Top or Bottom alignment are the the preferred placement, particularly on screens that
 * have a more narrow viewport. Tooltips utilize Global styles and are not affected by brand themes.
 *
 * **With icon**
 * - **iconRotateDegree** & **iconFlipDirection** props are optional.
 * - They are used to set up the correct dirrection for icons, for example,
 * arrows, caret up or caret down.
 *
 * ##Usability Considerations
 * With the exception of icons - which should always have alt text at a minimum - the UI should never rely on
 * Tooltips for clarity, especially because they are not always discovered by the user. If the user cannot
 * intuitively understand the interface without Tooltips, the interface should be redesigned.
 *
 * ##How to use
 * - Use Tooltips to clarify the UI element the user is interacting with, not to add additional content on the page.
 * Also, do not simply restate content on the page, for example, the title of the field.
 * - Tooltips should be short and to the point. Example: "Click X to do X" or "Icon Description." If a succinct
 * description is not possible, the interaction element should be redesigned.
 * - In a mouse-driven UI, Tooltips are triggered on hover (mouseover) and dismissed (disappear)
 * when the user mouses away from the element. In touch UIs, a Tooltip is triggered by tapping
 * and holding an item. The Tooltip is displayed as long as the user continues to hold the element.
 * Tap and hold is a more advanced user behavior, and further reason for not relying on Tooltips.
 * A novice user may never discover tap and hold for Tooltips.
 *
 * @slot default - Default, unnamed slot container for Tooltip text
 * @slot trigger - Named slot container for Tooltip element to trigger showing/hiding the Tooltip text
 */
export declare class Cre8Tooltip extends Cre8Element {
    static styles: import("lit").CSSResult[];
    /**
     * Positions the tooltip panel absolutely to the icon. Position overrides `isDynamic`.
     * @type {"default"|"top"|"left"|"right"}
     * @attr {string}
     * - **default** positions the tooltip panel below the trigger element
     * - **top** positions the tooltip panel above the trigger element
     * - **left** positions the tooltip panel left of the trigger element
     * - **right** positions the tooltip panel right of the trigger element
     */
    position?: 'top' | 'left' | 'right';
    /**
     * The knockout variant for the tooltip
     * @attr {boolean}
     * 1. If is true, the tooltip background is white
     * 2. If is false, the tooltip background is gray
     */
    knockout?: boolean;
    /**
     * The dynamic state for the tooltip. Position overrides isDynamic.
     * @attr {boolean}
     * - If true, the tooltip panel placement is determined by its position in the viewport
     * - If false, the tooltip panel placement will be placed according to the position value
     */
    isDynamic?: boolean;
    /**
     * The dynamic active state
     * @attr {boolean}
     * <br/><br/> _*This property is dynamically set_
     */
    isActiveDynamic?: boolean;
    /**
     * The active state for the tooltip
     * @attr {boolean}
     * - If true, the tooltip panel is visible
     * - If false, the tooltip panel is hidden
     * <br/><br/> _*This property is dynamically set_
     */
    isActive?: boolean;
    /**
     *  Accepts the ID string of the item the tooltip is referencing
     *  @attr {string}
     *  Dynmically appends its own ID to the aria-describedby attribute on the referenced element
     */
    ariaDescribes?: string;
    _uniqueId?: string;
    /**
     * svg as a raw string
     * - The icon is defined by this prop.
     * - Pass in a raw svg as a String for using <cre8-icon>
     */
    svg?: string;
    /**
     * iconRotateDegree is used for <cre8-icon> to set the arrow in the correct direction
     */
    iconRotateDegree?: number;
    /**
     * iconFlipDirection is used for <cre8-icon> to set the icon in the correct direction
     */
    iconFlipDirection?: string;
    /**
     * Query the tooltip panel element
     */
    _Cre8Tooltip: HTMLElement;
    /**
     * Query the tooltip panel element
     */
    _Cre8TooltipPanel: HTMLElement;
    /**
     * Query the document direction value
     * <br/><br/> _*This property is dynamically set_
     */
    get isRTL(): boolean;
    /**
     * updated Callback Lifecycle
     * 1. Find the second slot
     * 2. Create a string from joining the textContent of the textnodes
     * 3. Set the textContent of the tip generated in the firstUpdated lifecycle callback
     * */
    updated(): void;
    /**
     * firstUpdated Callback Lifecycle
     * 1. If ariaDescribes is set
        * a. create an ID and assign it to the property _uniqueId
        * b. Generate an empty div, assign it the  _uniqueId and the tooltip role
    * 2. Set the aria-describedby on the ariaDescribes target
    */
    firstUpdated(): void;
    /**
     * Connected Callback Lifecycle
     * 1. Add window mouseover event listener
     * 2. Add window mouseout event listener
     * 3. Add mousedown event listener
     * 4. Set the id and aria-describedby
     */
    connectedCallback(): void;
    /**
     * Disconnected Callback Lifecycle
     * 1. Remove window mouseover event listener
     * 2. Remove window mouseout event listener
     */
    disconnectedCallback(): void;
    /**
     * Handle all dynamic placement
     */
    dynamicPosition(): void;
    /**
     * Handle Keydown
     * 1. If escape or tab key is struck when the tooltip is active, close it
     * 2. If enter or escape is keyed, toggle the tooltip open or close.
     *    We need these since the click event is on a div so that accessibility reads this aloud to a user
     */
    private _handleKeydown;
    /**
     * Set Tooltip Active State
     * 1. Toggle the active state between true and false
     * 2. If is active, set the dynamic position and custom event.
     * 3. If is not active, remove fire the close custom event.
     * 4. Toggle the active state for dynamic. This prevents a flash of the tooltip in the orginal position.
     */
    toggleActive(): void;
    /**
     * Remove Active State
     * 1. If a specific event is fired, remove the active state.
     */
    removeActive: () => void;
    render(): import("lit-html").TemplateResult<1>;
}
declare global {
    interface HTMLElementTagNameMap {
        'cre8-tooltip': Cre8Tooltip;
    }
}
export default Cre8Tooltip;
//# sourceMappingURL=tooltip.d.ts.map