@aotearoan/neon/dist/src/components/feedback/tooltip/NeonTooltip.d.ts

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { NeonPosition } from '@/common/enums/NeonPosition';
import { NeonTooltipStyle } from '@/common/enums/NeonTooltipStyle';
import { NeonOutlineStyle } from '@/common/enums/NeonOutlineStyle';
import { NeonFunctionalColor } from '@/common/enums/NeonFunctionalColor';
/**
 * <p>
 *   Use <strong>NeonTooltip</strong> to display tooltips or popovers. It is recommended that tooltip content should be
 *   kept to a single line. Use the popover style for larger content.
 * </p>
 * <p>To use <strong>NeonTooltip</strong> provide the <em>target</em> and <em>content slots</em>.</p>
 */
declare const _default: import("vue").DefineComponent<{
    /**
     * Id of the tooltip.
     */
    id: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Placement of the tooltip contents.
     */
    placement: {
        type: () => NeonPosition;
        default: NeonPosition;
    };
    /**
     * Style of the tooltip, use <em>Tooltip</em> for a simple tooltip, use <em>Popover</em> for larger more complex
     * content.
     */
    tooltipStyle: {
        type: () => NeonTooltipStyle;
        default: NeonTooltipStyle;
    };
    /**
     * Style of the outline to use when the tooltip target has focus, use <em>text</em> for tooltips wrapping text and
     * <em>border</em> for tooltips wrapping "block" elements, e.g. buttons.
     */
    outlineStyle: {
        type: () => NeonOutlineStyle;
        default: NeonOutlineStyle;
    };
    /**
     * Color of the tooltip target when it is focussed.
     */
    outlineColor: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * Restrict placement to within this container.
     */
    placementContainer: {
        type: () => HTMLElement;
        default: null;
    };
}, {
    tooltip: import("vue").Ref<HTMLElement | null>;
    tooltipPlacement: import("vue").Ref<NeonPosition | null>;
    content: import("vue").Ref<HTMLElement | null>;
    open: import("vue").Ref<boolean>;
    toggleTooltip: () => void;
    closeTooltip: () => void;
    openTooltip: () => void;
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
    /**
     * Id of the tooltip.
     */
    id: {
        type: StringConstructor;
        default: null;
    };
    /**
     * Placement of the tooltip contents.
     */
    placement: {
        type: () => NeonPosition;
        default: NeonPosition;
    };
    /**
     * Style of the tooltip, use <em>Tooltip</em> for a simple tooltip, use <em>Popover</em> for larger more complex
     * content.
     */
    tooltipStyle: {
        type: () => NeonTooltipStyle;
        default: NeonTooltipStyle;
    };
    /**
     * Style of the outline to use when the tooltip target has focus, use <em>text</em> for tooltips wrapping text and
     * <em>border</em> for tooltips wrapping "block" elements, e.g. buttons.
     */
    outlineStyle: {
        type: () => NeonOutlineStyle;
        default: NeonOutlineStyle;
    };
    /**
     * Color of the tooltip target when it is focussed.
     */
    outlineColor: {
        type: () => NeonFunctionalColor;
        default: NeonFunctionalColor;
    };
    /**
     * Restrict placement to within this container.
     */
    placementContainer: {
        type: () => HTMLElement;
        default: null;
    };
}>>, {
    placement: NeonPosition;
    placementContainer: HTMLElement;
    outlineStyle: NeonOutlineStyle;
    id: string;
    tooltipStyle: NeonTooltipStyle;
    outlineColor: NeonFunctionalColor;
}, {}>;
export default _default;