import { Component, type HTMLCustomElement } from 'maverick.js/element';
declare global {
    interface MaverickElements {
        'media-tooltip': MediaTooltipElement;
    }
}
/**
 * A contextual text bubble that displays a description for an element that appears on pointer
 * hover or keyboard focus.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/tooltip}
 * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role}
 * @example
 * ```html
 * <media-play-button>
 *   <media-tooltip position="top left">
 *     <span slot="play">Play</span>
 *     <span slot="pause">Pause</span>
 *   </media-tooltip>
 * </media-play-button>
 * ```
 */
export declare class Tooltip extends Component<TooltipAPI> {
    static el: import("maverick.js/element").CustomElementDefinition<TooltipAPI>;
    protected onAttach(el: HTMLElement): void;
}
export interface TooltipAPI {
    props: TooltipProps;
}
export type TooltipXPosition = 'left' | 'center' | 'right';
export type TooltipYPosition = 'top' | 'bottom';
export type TooltipPosition = `${TooltipYPosition} ${TooltipXPosition}`;
export interface TooltipProps {
    /**
     * Specifies the position at which the tooltip is placed.
     *
     * @example `top left`
     */
    position: TooltipPosition;
}
export interface MediaTooltipElement extends HTMLCustomElement<Tooltip> {
}