Tooltip#
A tooltip is a small popover that displays brief information related to an element when the element receives mouse hover or keyboard focus.
Import#
import { Tooltip } from 'bumbag';
Usage#
Arrow#
Add an arrow to a tooltip with the hasArrow
prop.
Placements#
You can place the tooltip to a particular side of the target with the placement
prop.
Animation#
Fade#
Slide#
Expand#
Props#
Tooltip Props#
content
Required
string | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<any, any, any>)>
placement
"top-start" | "top" | "top-end" | "right-start" | "right" | "right-end" | "bottom-end" | "bottom" | "bottom-start" | "left-end" | "left" | "left-start" | "center"
baseId
string
tooltipContentProps
BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 8 more ... & AnimateProps
tooltipState
Pick<PopoverInitialState, "baseId" | "visible" | "animated" | "placement" | "unstable_fixed" | "unstable_flip" | "unstable_offset" | "gutter" | "unstable_preventOverflow"> & Pick<...>
hasArrow
boolean
arrowProps
BoxOptions & HTMLAttributes<any> & RefAttributes<any> & { wrapElement?: (element: ReactNode) => ReactNode; } & ... 6 more ... & { ...; }
delay
string
Delay of the animation (in s/ms).
duration
string
Duration of the animation (in s/ms).
expand
boolean | "top" | "right" | "bottom" | "left" | "center"
Will the component have an expand animation when it is toggled on/off?
fade
boolean
Will the component have a fade animation when it is toggled on/off?
slide
boolean | "top" | "right" | "bottom" | "left"
Will the component have a slide animation when it is toggled on/off?
timingFunction
string
Timing function of the animation
Inherits Box
props
use
string | (ComponentClass<any, any> & { useProps: any; }) | (FunctionComponent<any> & { useProps: any; })
className
string
children
string | number | boolean | {} | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)>) | (new (props: any) => Component<...>)> | ReactNodeArray | ReactPortal | ((props: BoxProps) => ReactNode)
alignX
"right" | "left" | "center"
alignY
"top" | "bottom" | "center"
variant
string
colorMode
string
disabled
boolean
overrides
{ useCSSVariables?: boolean; altitudes?: AltitudesThemeConfig; borders?: BordersThemeConfig; borderRadii?: BorderRadiiThemeConfig; ... 95 more ...; Template?: TemplateThemeConfig; }
elementRef
((instance: any) => void) | RefObject<any>
themeKey
string
Theming#
Tooltip.Reference.styles.base
Tooltip.Content.styles.base
Tooltip.Arrow.styles.base