Tooltip

Tooltips are lightweight popovers that appear when the user hovers over an element or clicks on it. By default the Tooltip will render as the "dark" variant but will respect the data-bs-theme attribute to change the color scheme. This component combines React Bootstrap OverlayTrigger and Tooltip.

See React Bootstrap/Overlays for full documentation and props.

Result

Loading...

Live Editor

<Tooltip title="Hovering over the button will show this tooltip."> <Button>Button</Button> </Tooltip>

<Tooltip title="Hovering over the button will show this tooltip.">
  <Button>Button</Button>
</Tooltip>

Variants

When the variant prop is used it will supersede the data-bs-theme attribute.

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))', gridGap: '2rem', }} > <Tooltip title="This is an example tooltip. When the lines are long they will wrap." placement="top" variant="dark" > <Button variant="dark">Dark (default)</Button> </Tooltip> <Tooltip title="This is an example tooltip. When the lines are long they will wrap." placement="top" variant="light" > <Button variant="light">Light</Button> </Tooltip> </div>

<div
  style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
    gridGap: '2rem',
  }}
>
  <Tooltip
    title="This is an example tooltip. When the lines are long they will wrap."
    placement="top"
    variant="dark"
  >
    <Button variant="dark">Dark (default)</Button>
  </Tooltip>
  <Tooltip
    title="This is an example tooltip. When the lines are long they will wrap."
    placement="top"
    variant="light"
  >
    <Button variant="light">Light</Button>
  </Tooltip>
</div>

Placement

The placement prop can be used to change the position of the Tooltip relative to its trigger element.

Basic placements

Basic placements will position the arrow centered on the Tooltip.

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))', gridGap: '2rem', }} > {['top', 'right', 'bottom', 'left'].map((placement) => ( <Tooltip key={placement} title={`Tooltip on ${placement}`} placement={placement}> <Button>{placement}</Button> </Tooltip> ))} </div>

<div
  style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(100px, 1fr))',
    gridGap: '2rem',
  }}
>
  {['top', 'right', 'bottom', 'left'].map((placement) => (
    <Tooltip key={placement} title={`Tooltip on ${placement}`} placement={placement}>
      <Button>{placement}</Button>
    </Tooltip>
  ))}
</div>

Variation placements

Variation placements will position the arrow offset from the center of the Tooltip.

Result

Loading...

Live Editor

<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gridGap: '2rem', }} > {[ 'auto', 'auto-start', 'auto-end', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'right-start', 'right-end', 'left-start', 'left-end', ].map((placement) => ( <Tooltip key={placement} title={`Tooltip on ${placement}`} placement={placement}> <Button>{placement}</Button> </Tooltip> ))} </div>

<div
  style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
    gridGap: '2rem',
  }}
>
  {[
    'auto',
    'auto-start',
    'auto-end',
    'top-start',
    'top-end',
    'bottom-start',
    'bottom-end',
    'right-start',
    'right-end',
    'left-start',
    'left-end',
  ].map((placement) => (
    <Tooltip key={placement} title={`Tooltip on ${placement}`} placement={placement}>
      <Button>{placement}</Button>
    </Tooltip>
  ))}
</div>

Portal control

With the container prop you can provide the DOM element you want the Tooltip to be appended to.

Result

Loading...

Live Editor

<> <Tooltip id="demo-tooltip" title="This is an example tooltip. When the lines are long they will wrap." placement="top" container={() => document.getElementById('tooltip-container')} > <Button>Button with tooltip</Button> </Tooltip> {/* tooltip will be appended to this div */} <div id="tooltip-container" /> </>

<>
  <Tooltip
    id="demo-tooltip"
    title="This is an example tooltip. When the lines are long they will wrap."
    placement="top"
    container={() => document.getElementById('tooltip-container')}
  >
    <Button>Button with tooltip</Button>
  </Tooltip>
  {/* tooltip will be appended to this div */}
  <div id="tooltip-container" />
</>

Props