@octopusdeploy/design-system-components
Version:
The design systems component library.
40 lines (39 loc) • 1.85 kB
TypeScript
import type { ReactNode } from "react";
import "react-tippy/dist/tippy.css";
export type TooltipContent = string | ReactNode;
export type TooltipPosition = "right" | "left" | "top" | "bottom";
export interface TooltipProps {
/**
* Sets the class name of the div wrapper.
* @deprecated Please avoid using this. This property will be removed in the near future.
*/
className?: string;
/** The content to be shown in the tooltip popper */
content?: TooltipContent;
/** The html element that will show a tooltip when user hovers over it */
children?: React.ReactNode;
/** The position that the tooltip popper shows based on the container element (children prop)*/
position?: TooltipPosition;
/**
* Specifies which type of events will trigger a tooltip to show
* More info can be found: https://github.com/tvkhoa/react-tippy
*/
trigger?: "mouseenter" | "focus" | "click" | "manual";
/** Just only use it if you want to show/hide tooltip popper manually. Usually, you don't need it*/
open?: boolean;
/**
* Specifies how far away the tooltip is from its element, in pixel.
* @deprecated Please avoid using this, and please contact BPE team if you really need this, it could be a good signal to improve our Tooltip component.
*/
distance?: number;
/**
* Controls the display css property of the tooltip div.
*/
display?: "block" | "inline-block" | "flex" | "inline";
/**
* Set to true when tooltip has Markdown content.
* This applies inverse colors to markdown elements for better visibility.
*/
isContentMarkdown?: boolean;
}
export declare function Tooltip({ content, className, children, position, open, trigger, distance, display, isContentMarkdown }: TooltipProps): import("react/jsx-runtime").JSX.Element;