Skip to main content

Tooltip

v.5.0.2

Installation​

yarn add @mercell/tooltip-react

Usage​

Using the Tooltip component is as simple as importing it like this.

import { Tooltip } from '@mercell/tooltip-react';
Live Editor
Result

Types, definitions, etc.​

TooltipProps
interface TooltipProps {
    message: React.ReactNode;
    placement?: Placement;
    tooltipInnerWrapperClassName?: string;
    tooltipMessageClassName?: string;
    tooltipArrowClassName?: string;
} & JSX.IntrinsicElements['div']
NameTypeDefaultRequiredDescription
messageReactNode-yesThe message displayed in the tooltip. See example above for simple string example and more advanced element example
placementPlacementautonoString input to select the tooltip placement. Defaults to auto
tooltipInnerWrapperClassNamestring-noAdd custom classnames to the inner wrapper
tooltipMessageClassNamestring-noAdd custom classnames to the inner message of the tooltip instead of the tooltip itself
tooltipArrowClassNamestring-noAdd custom classnames to the tooltip arrow
Placement
type Placement =
    | 'top'
    | 'bottom'
    | 'right'
    | 'left'
    | 'top-start'
    | 'top-end'
    | 'bottom-start'
    | 'bottom-end'
    | 'right-start'
    | 'right-end'
    | 'left-start'
    | 'left-end'
    | 'auto'
    | 'auto-start'
    | 'auto-end';