Tooltips

React Bootstrap 5 Tooltips component

Documentation and examples for adding custom tooltips with React.

Note: Read the API tab to find all available options and advanced customization


Basic example

Hover the link to see the tooltip

import React from 'react';
import { MDBTooltip } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <p className='mb-0'>
      Hover the link to see the
      <MDBTooltip tag='a' wrapperProps={{ href: '#' }} title="Hi! I'm a tooltip!">
        tooltip
      </MDBTooltip>
    </p>
  );
}

Overview

Things to know when using the tooltip plugin:

  • Tooltips are opt-in for performance reasons, so you must initialize them yourself.
  • Tooltips with zero-length titles are never displayed.
  • Triggering tooltips on hidden elements will not work.
  • Tooltips for .disabled or disabled elements must be triggered on a wrapper element.
  • When triggered from hyperlinks that span multiple lines, tooltips will be centered. Use white-space: nowrap; on your <a>s to avoid this behavior.
  • Tooltips must be hidden before their corresponding elements have been removed from the DOM.
  • Tooltips can be triggered thanks to an element inside a shadow DOM.

Four directions

Hover over the buttons below to see the four tooltips directions: top, right, bottom, and left.

import React from 'react';
import { MDBTooltip } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <>
      <MDBTooltip wrapperProps={{ color: 'secondary' }} title='Tooltip on top'>
        Tooltip on top
      </MDBTooltip>
      <MDBTooltip wrapperProps={{ color: 'secondary' }} placement='right' title='Tooltip on right'>
        Tooltip on right
      </MDBTooltip>
      <MDBTooltip wrapperProps={{ color: 'secondary' }} placement='bottom' title='Tooltip on bottom'>
        Tooltip on bottom
      </MDBTooltip>
      <MDBTooltip wrapperProps={{ color: 'secondary' }} placement='left' title='Tooltip on left'>
        Tooltip on left
      </MDBTooltip>
    </>
  );
}

And with custom HTML added:

import React from 'react';
import { MDBTooltip } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTooltip
      wrapperProps={{ color: 'secondary' }}
      title={
        <>
          <em>Tooltip</em> <u>with</u> <b>HTML</b>
        </>
      }
    >
      Tooltip with HTML
    </MDBTooltip>
  );
}

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot focus, hover, or click them to trigger a tooltip (or popover). As a workaround, you’ll want to trigger the tooltip from a wrapper <div> or <span>, ideally made keyboard-focusable using tabIndex={0}, and override the pointer-events on the disabled element.

import React from 'react';
import { MDBTooltip, MDBBtn } from 'mdb-react-ui-kit';

export default function App() {
  return (
    <MDBTooltip tag='span' wrapperClass='d-inline-block' title='Disabled tooltip'>
      <MDBBtn disabled style={{ pointerEvents: 'none' }}>
        Disabled button
      </MDBBtn>
    </MDBTooltip>
  );
}

Tooltips - API


Import

import { MDBTooltip } from 'mdb-react-ui-kit';

Properties

MDBTooltip

Name Type Default Description Example
disableMouseDown boolean false Disables mousedown event. <MDBTooltip disableMouseDown>Tooltip</MDBTooltip>
options object '' Allows to change the default Popper config, see Popper's configuration. <MDBTooltip options={{ modifiers: [{ name: 'offset', options: { offset: [10, 20] }}]}}>Tooltip</MDBTooltip>
placement String 'top' How to position the tooltip - auto | top | bottom | left | right. When auto is specified, it will dynamically reorient the tooltip. <MDBTooltip placement="bottom">Tooltip</MDBTooltip>
tag String MDBBtn Define tag of the wrapper element. <MDBTooltip tag='span'>Tooltip</MDBTooltip>
title String / HTML '' Defines the tooltip text. <MDBTooltip title="Hi! I'm a tooltip!">Tooltip</MDBTooltip>
tooltipTag String 'div' Define tag of the MDBTooltip element. <MDBTooltip tooltipTag='span'>Tooltip</MDBTooltip>
wrapperClass String '' Add custom class to the tooltip wrapper <MDBTooltip wrapperClass="class">Tooltip</MDBTooltip>
wrapperProps object '' Add custom properties to the tooltip wrapper <MDBTooltip wrapperProps={{ color: 'secondary' }}>Tooltip</MDBTooltip>

Events

Name Type Description
onClose () => any Fires when the tooltip demands to be hidden.
onOpen () => any Fires when the tooltip demands to be shown.