@dnanpm/styleguide
Version:
DNA Styleguide repository provides the set of components and theme object used in various DNA projects.
76 lines (75 loc) • 2.56 kB
TypeScript
import type { ReactNode } from 'react';
import React from 'react';
import type { ITooltip as ReactTooltipProps } from 'react-tooltip';
type Position = 'left' | 'right' | 'middle';
interface Props {
/**
* Unique ID for the search input element
*/
id: string;
/**
* Allows to set the placement of Tooltip content
*
* @param {ReactTooltipProps['place']} top Places Tooltip above the trigger element
* @param {ReactTooltipProps['place']} right Places Tooltip right of the trigger element
* @param {ReactTooltipProps['place']} bottom Places Tooltip under the trigger element
* @param {ReactTooltipProps['place']} left Places Tooltip left of the trigger element
*
* @default 'top'
*/
placement?: ReactTooltipProps['place'];
/**
* Content of the component
*/
children?: ReactNode;
/**
* Allows to set position of Tooltip icon relative to other content and adds appropriate margins
*
* @param {Position} left Tooltip component icon is on the left side of content, add right margin
* @param {Position} right Tooltip component icon is on the right side of content, add left margin
* @param {Position} middle Tooltip component icon is in the middle of content, add left and right margins
*
* @default false
*/
position?: Position;
/**
* Allows to hide trigger element. Use `data-tooltip-id` on custom trigger element to attach it to the Tooltip
*
* @default false
*/
hideTriggerElement?: boolean;
/**
* Allows to close Tooltip by pressing ESC key
*
* @default true
*/
closeWithEsc?: boolean;
/**
* Allows to open Tooltip by clicking the trigger element instead of hovering it
*
* @default false
*/
isClickable?: boolean;
/**
* Allows to keep Tooltip open when hovered. Useful when it contains interactive elements
*
* @default false
*/
isHoverable?: boolean;
/**
* Allows to break plain text to multiple lines.
* Multiline content is supported by default by passing appropriate content to `children` property
*/
isMultiline?: boolean;
/**
* Allows to pass a custom className
*/
className?: string;
/**
* Allows to pass testid string for testing purposes
*/
'data-testid'?: string;
}
declare const Tooltip: ({ "data-testid": dataTestId, closeWithEsc, isClickable, isHoverable, ...props }: Props) => React.JSX.Element;
/** @component */
export default Tooltip;