leaflet/dist/types/layer/Tooltip.d.ts

JavaScript library for mobile-friendly interactive maps

import { DivOverlay } from './DivOverlay.js';
import { Point } from '../geometry/Point.js';
import type { Defaults, DivOverlayEventMap, PointExpression, TooltipDefaults, TooltipOptions, ZoomAnimEvent } from '../types.js';
import type { LeafletMap } from '../map/Map.js';
/** @import {Defaults, DivOverlayEventMap, PointExpression, TooltipDefaults, TooltipOptions, ZoomAnimEvent} from '../types.js' */
/** @import {LatLng} from '../geo/LatLng.js' */
/** @import {LeafletMap} from '../map/Map.js' */
declare const defaultOptions: {
    /** `Map pane` where the tooltip will be added. */
    pane: string;
    /**
     * Optional offset of the tooltip position.
     * @type {PointExpression}
     */
    offset: PointExpression;
    /**
     * Direction where to open the tooltip. Possible values are: `right`, `left`, `top`, `bottom`, `center`, `auto`.
     * `auto` will dynamically switch between `right` and `left` according to the tooltip position on the map.
     * @type {'right' | 'left' | 'top' | 'bottom' | 'center' | 'auto'}
     */
    direction: 'right' | 'left' | 'top' | 'bottom' | 'center' | 'auto';
    /** Whether to open the tooltip permanently or only on pointerover. */
    permanent: boolean;
    /** If true, the tooltip will follow the pointer instead of being fixed at the feature center. */
    sticky: boolean;
    /** Tooltip container opacity. */
    opacity: number;
};
export type TooltipDefaultsValues = typeof defaultOptions;
export type TooltipEventProps = {
    /**
     * The tooltip that was opened or closed.
     */
    tooltip: Tooltip;
};
/** @typedef {typeof defaultOptions} TooltipDefaultsValues */
/**
 * @typedef {Object} TooltipEventProps
 * @property {Tooltip} tooltip The tooltip that was opened or closed.
 */
/**
 * Used to display small texts on top of map layers.
 * @example
 * If you want to just bind a tooltip to marker:
 *
 * ```js
 * marker.bindTooltip("my tooltip text").openTooltip();
 * ```
 * Path overlays like polylines also have a `bindTooltip` method.
 *
 * A tooltip can be also standalone:
 *
 * ```js
 * const tooltip = new Tooltip()
 * 	.setLatLng(latlng)
 * 	.setContent('Hello world!<br />This is a nice tooltip.')
 * 	.addTo(map);
 * ```
 * or
 * ```js
 * const tooltip = new Tooltip(latlng, {content: 'Hello world!<br />This is a nice tooltip.'})
 * 	.addTo(map);
 * ```
 *
 * **Security note.** Tooltip string content is rendered as HTML. If your content
 * may include untrusted input (e.g. data from users or external APIs), sanitize
 * it with a library like [DOMPurify](https://github.com/cure53/DOMPurify), or
 * build a DOM element using `textContent` to render it as plain text:
 *
 * ```js
 * const el = document.createElement('div');
 * el.textContent = untrustedString;
 * marker.bindTooltip(el);
 * ```
 *
 * Note about tooltip offset. Leaflet takes two options in consideration
 * for computing tooltip offsetting:
 * - the `offset` Tooltip option: it defaults to [0, 0], and it's specific to one tooltip.
 *   Add a positive x offset to move the tooltip to the right, and a positive y offset to
 *   move it to the bottom. Negatives will move to the left and top.
 * - the `tooltipAnchor` Icon option: this will only be considered for Marker. You
 *   should adapt this value if you use a custom icon.
 *
 * @template {TooltipOptions} [O=TooltipOptions]
 * @template {DivOverlayEventMap} [E=DivOverlayEventMap]
 * @extends {DivOverlay<O & TooltipDefaults, E>}
 */
export declare class Tooltip<O extends TooltipOptions = TooltipOptions, E extends DivOverlayEventMap = DivOverlayEventMap> extends DivOverlay<O & TooltipDefaults, E> {
    /** @type {Defaults<TooltipOptions>} */
    static defaultOptions: Defaults<TooltipOptions>;
    /** @param {LeafletMap} map */
    onAdd(map: LeafletMap): void;
    /** @param {LeafletMap} map */
    onRemove(map: LeafletMap): void;
    getEvents(): import("../types.js").MapListeners;
    _initLayout(): void;
    _updateLayout(): void;
    _adjustPan(): void;
    /** @param {Point} pos */
    _setPosition(pos: Point): void;
    _updatePosition(): void;
    /** @param {number} opacity */
    setOpacity(opacity: number): void;
    /** @param {ZoomAnimEvent} e */
    _animateZoom(e: ZoomAnimEvent): void;
    _getAnchor(): Point;
}
export {};