import PPopup from "../popup/popup.component.js"; import PureElement from "../../internal/pure-ui-element.js"; import type { CSSResultGroup } from "lit"; /** * @summary Tooltips display additional information based on a specific action. * @documentation https://pureui.online/components/tooltip * @status stable * @since 1.0 * * @dependency p-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 p-show - Emitted when the tooltip begins to show. * @event p-after-show - Emitted after the tooltip has shown and all animations are complete. * @event p-hide - Emitted when the tooltip begins to hide. * @event p-after-hide - Emitted after the tooltip has hidden and all animations are complete. * * @csspart base - The component's base wrapper, an `` 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. */ export default class PTooltip extends PureElement { static styles: CSSResultGroup; static dependencies: { "p-popup": typeof PPopup; }; private hoverTimeout; private readonly localize; private closeWatcher; defaultSlot: HTMLSlotElement; body: HTMLElement; popup: PPopup; /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */ content: string; /** * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip * inside of the viewport. */ placement: "top" | "top-start" | "top-end" | "right" | "right-start" | "right-end" | "bottom" | "bottom-start" | "bottom-end" | "left" | "left-start" | "left-end"; /** Disables the tooltip so it won't show when triggered. */ disabled: boolean; /** The distance in pixels from which to offset the tooltip away from its target. */ distance: number; /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */ open: boolean; /** The distance in pixels from which to offset the tooltip along its target. */ skidding: number; /** * 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. */ trigger: string; /** * 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. */ hoist: boolean; constructor(); disconnectedCallback(): void; firstUpdated(): void; private handleBlur; private handleClick; private handleFocus; private handleDocumentKeyDown; private handleMouseOver; private handleMouseOut; private hasTrigger; handleOpenChange(): Promise; handleOptionsChange(): Promise; handleDisabledChange(): void; /** Shows the tooltip. */ show(): Promise; /** Hides the tooltip */ hide(): Promise; render(): import("lit-html").TemplateResult<1>; }