Rate these docs

React Bootstrap Tooltips

React Tooltips - Bootstrap 4 & Material Design

React Bootstrap tooltips are little clouds with a brief text message, triggered by clicking on a specific element or hovering over it.

Tooltips are a convenient way of presenting additional information to your user.

They significantly increase User Experience, especially with advanced UI elements, which often require additional explanation.


Basic example

Hover over the links below to see tooltips:


        import React from 'react';
        import { MDBTooltip, MDBBtn } from 'mdbreact';
        
        const TooltipsPage = () => {
        
          return (
            <div style={{ display: "flex" }}>
              <MDBTooltip
                placement="top"
              >
                <MDBBtn>Tooltip on top</MDBBtn>
                <div>
                  Tooltip on top
                </div>
              </MDBTooltip>
              <MDBTooltip
                placement="right"
              >
                <MDBBtn>Tooltip on right</MDBBtn>
                <div>
                  Tooltip on right
                </div>
              </MDBTooltip>
              <MDBTooltip
                placement="bottom"
              >
                <MDBBtn>Tooltip on bottom</MDBBtn>
                <div>
                  Tooltip on bottom
                </div>
              </MDBTooltip>
              <MDBTooltip
                placement="left"
              >
                <MDBBtn>Tooltip on left</MDBBtn>
                <div>
                  Tooltip on left
                </div>
              </MDBTooltip>
            </div>
          )
        }
        
        export default TooltipsPage;
      

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

React Tooltips - API

In this section you will find advanced information about the Tooltips component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.


Import statement


                import { MDBTooltip } from 'mdbreact';

                OR:

                import { MDBPopper } from 'mdbreact';
            

Usage

Use MDBTooltip as a wrapper. First child is the component which will be visible in the DOM and aimed by the tooltip; and the second one is your tooltip content. If you use html element as the first argument, remember to add domElement property to the MDBTooltip.


          <MDBTooltip
              placement="left"
          >
              <MDBBtn>Tooltip on left</MDBBtn>
              <div>
                  Tooltip on left
              </div>
          </MDBTooltip>
      

        <MDBTooltip
            placement="left"
            domElement
        >
            <span>Tooltip on left</span>
            <span>
                Tooltip on left
            </span>
        </MDBTooltip>
      

API Reference: Properties

Name Type Default Description Example
clickable Boolean false If set to true - tooltip is controlled by mouse click. <MDBPopper clickable ... />
domElement Boolean false Use this prop, when tooltip component doesn't accept innerRef property (HTML elements). <MDBPopper domElement ... />
modifiers Object Property used by Popper.js to customize popper element; find more here (click) <MDBPopper modifiers={{ preventOverflow: { enabled: false } }} ... />
id String popper Property used to distinguish tooltip/popover elements from eachother for outside click recognition. <MDBPopper id="greatPopover" ... />
isVisible Boolean false Sets the default state of the tooltip, or use it like the value in controlled inputs - combined with onChange method. <MDBPopper isVisible={this.state.isVisible} onChange={this.setVisibility} ... />
placement String top Determines tooltip placement. Choose from left | right | top | bottom <MDBPopper placement='top' ... />
popover Boolean false Converts tooltip styling to popover styling. <MDBPopper popover ... />
style Object { display: 'inline-block' } Applies custom style rules for the element which wraps tooltip aimed component. <MDBPopper style={{ display: "block" }} ... />
tag String div Sets custom tag for the element which wraps tooltip aimed component. <MDBPopper tag="span" ... />

API Reference: Popper Methods

Name Parameters Description Example
onChange This event fires immediately when the popper state changes; return false/true. <MDBPopper onChange={this.updatePopoverState} />