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#

function Example() {
  return (
    <Tooltip content="What was the best thing that happened to you today?">
      <Button>Hover me</Button>
    </Tooltip>
  )
}

Arrow#

Add an arrow to a tooltip with the hasArrow prop.

function Example() {
  return (
    <Tooltip content="What was the best thing that happened to you today?" hasArrow>
      <Button>Hover me</Button>
    </Tooltip>
  )
}

Placements#

You can place the tooltip to a particular side of the target with the placement prop.

function Example() {
  return (
    <Flex justifyContent="space-between">
      <Tooltip content="What was the best thing that happened to you today?" placement="right">
        <Button>Hover me</Button>
      </Tooltip>
      <Tooltip content="What was the best thing that happened to you today?" placement="bottom">
        <Button>Hover me</Button>
      </Tooltip>
      <Tooltip content="What was the best thing that happened to you today?" placement="left">
        <Button>Hover me</Button>
      </Tooltip>
    </Flex>
  )
}

Animation#

Fade#

function Example() {
  return (
    <Tooltip content="What was the best thing that happened to you today?" fade>
      <Button>Hover me</Button>
    </Tooltip>
  )
}

Slide#

function Example() {
  return (
    <Tooltip content="What was the best thing that happened to you today?" fade slide>
      <Button>Hover me</Button>
    </Tooltip>
  )
}

Expand#

function Example() {
  return (
    <Tooltip content="What was the best thing that happened to you today?" fade slide expand>
      <Button>Hover me</Button>
    </Tooltip>
  )
}

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

string
  | (ComponentClass<any, any> & { useProps: any; })
  | (FunctionComponent<any> & { useProps: any; })

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)

{
  useCSSVariables?: boolean;
  altitudes?: AltitudesThemeConfig;
  borders?: BordersThemeConfig;
  borderRadii?: BorderRadiiThemeConfig;
  ... 95 more ...;
  Template?: TemplateThemeConfig;
}

Theming#

import { ThemeProvider } from 'bumbag';
const theme = {
  Tooltip: {
    Reference: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Tooltip: {
    Content: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>

import { ThemeProvider } from 'bumbag';
const theme = {
  Tooltip: {
    Arrow: {
      styles: {
        base: {
          background: "#ffe3a4"
        }
      }
    }
  }
}
<ThemeProvider theme={theme}>...</ThemeProvider>