React Bootstrap docs

Tooltips

Custom tooltips for local title storage.

Static examples

Live demo

import Stack from 'react-bootstrap/Stack'
import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Button from 'react-bootstrap/Button'
import Tooltip from 'react-bootstrap/Tooltip'

export default function TooltipsLiveDemo() {
  return (
    <Stack direction="horizontal" gap={2} className="flex-wrap">
      {(['top', 'right', 'bottom', 'left'] as const).map((placement) => (
        <OverlayTrigger
          key={placement}
          placement={placement}
          overlay={<Tooltip id={`tooltip-positioned-${placement}`}>Tooltip on {placement}</Tooltip>}
        >
          <Button variant="outline-secondary me-1 mb-1">Tooltip on {placement}</Button>
        </OverlayTrigger>
      ))}
      <OverlayTrigger
        placement="top"
        overlay={
          <Tooltip>
            <i>Tooltip</i> <u>with</u> <strong>HTML</strong>
          </Tooltip>
        }
      >
        <Button variant="outline-secondary mb-1">Tooltip with HTML</Button>
      </OverlayTrigger>
    </Stack>
  )
}

Small size

import OverlayTrigger from 'react-bootstrap/OverlayTrigger'
import Button from 'react-bootstrap/Button'
import Tooltip from 'react-bootstrap/Tooltip'

export default function TooltipsSmallDemo() {
  return (
    <OverlayTrigger placement="top" overlay={<Tooltip className="tooltip-sm">I&apos;m a small tooltip</Tooltip>}>
      <Button variant="outline-secondary me-1 mb-1">Small tooltip example</Button>
    </OverlayTrigger>
  )
}
Top