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.