@coreui/react
Version:
UI Components Library for React.js
119 lines (118 loc) • 4.46 kB
TypeScript
import React, { HTMLAttributes, ReactNode } from 'react';
import type { Options } from '@popperjs/core';
import type { Placements, Triggers } from '../../types';
export interface CTooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
/**
* Enables or disables the CSS fade transition for the React Tooltip.
*
* @since 4.9.0
*/
animation?: boolean;
/**
* Adds a custom class name to the React Tooltip container. Useful for overriding default styles or applying additional design choices.
*/
className?: string;
/**
* Appends the React Tooltip to a specific element instead of the default `document.body`. You may pass:
* - A DOM element (`HTMLElement` or `DocumentFragment`)
* - A function that returns a single element
* - `null`
*
* @example
* <CTooltip container={document.getElementById('my-container')}>...</CTooltip>
*
* @default document.body
* @since 4.11.0
*/
container?: DocumentFragment | Element | (() => DocumentFragment | Element | null) | null;
/**
* Content to be displayed within the React Tooltip. Can be a string or any valid React node.
*/
content: ReactNode | string;
/**
* The delay (in milliseconds) before showing or hiding the React Tooltip.
* - If provided as a number, the delay is applied to both "show" and "hide".
* - If provided as an object, it should have distinct "show" and "hide" values.
*
* @example
* // Delays 300ms on both show and hide
* <CTooltip delay={300}>...</CTooltip>
*
* // Delays 500ms on show and 100ms on hide
* <CTooltip delay={{ show: 500, hide: 100 }}>...</CTooltip>
*
* @since 4.9.0
*/
delay?: number | {
show: number;
hide: number;
};
/**
* Array of fallback placements for the React Tooltip to use when the preferred placement cannot be achieved. These placements are tried in order.
*
* @type 'top', 'right', 'bottom', 'left' | ('top', 'right', 'bottom', 'left')[]
* @since 4.9.0
*/
fallbackPlacements?: Placements | Placements[];
/**
* Adjusts the offset of the React Tooltip relative to its target. Expects a tuple `[x-axis, y-axis]`.
*
* @example
* // Offset the menu 0px in X and 10px in Y direction
* <CTooltip offset={[0, 10]}>...</CTooltip>
*
* // Offset the menu 5px in both X and Y direction
* <CTooltip offset={[5, 5]}>...</CTooltip>
*/
offset?: [number, number];
/**
* Callback fired immediately after the React Tooltip is hidden.
*/
onHide?: () => void;
/**
* Callback fired immediately after the React Tooltip is shown.
*/
onShow?: () => void;
/**
* Initial placement of the React Tooltip. Note that Popper.js modifiers may alter this placement automatically if there's insufficient space in the chosen position.
*/
placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
/**
* Customize the Popper.js configuration used to position the React Tooltip. Pass either an object or a function returning a modified config. [Learn more](https://popper.js.org/docs/v2/constructors/#options)
*
* @example
* <CTooltip
* popperConfig={(defaultConfig) => ({
* ...defaultConfig,
* strategy: 'fixed',
* modifiers: [
* ...defaultConfig.modifiers,
* { name: 'computeStyles', options: { adaptive: false } },
* ],
* })}
* >...</CTooltip>
*
* @since 5.5.0
*/
popperConfig?: Partial<Options> | ((defaultPopperConfig: Partial<Options>) => Partial<Options>);
/**
* Determines the events that toggle the visibility of the React Tooltip. Can be a single trigger or an array of triggers.
*
* @example
* // Hover-only tooltip
* <CTooltip trigger="hover">...</CTooltip>
*
* // Hover + click combined
* <CTooltip trigger={['hover', 'click']}>...</CTooltip>
*
* @type 'hover' | 'focus' | 'click' | ('hover' | 'focus' | 'click')[]
*/
trigger?: Triggers | Triggers[];
/**
* Controls the visibility of the React Tooltip.
* - `true` to show the tooltip.
* - `false` to hide the tooltip.
*/
visible?: boolean;
}
export declare const CTooltip: React.ForwardRefExoticComponent<CTooltipProps & React.RefAttributes<HTMLDivElement>>;