vidstack
Version:
Build awesome media experiences on the web.
43 lines (42 loc) • 1.39 kB
TypeScript
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> {
}