Rate this 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 } from 'mdbreact';
        
        const TooltipsPage = () => {
        
          return (
            <div style={{ display: "flex" }}>
              <MDBTooltip
                placement="bottom"
                componentClass="btn btn-primary"
                tag="div"
                component="button"
                tooltipContent="MDBTooltip on top">
                MDBTooltip on top
                </MDBTooltip>
              <MDBTooltip
                placement="right"
                componentClass="btn btn-primary"
                tag="div"
                component="button"
                tooltipContent="MDBTooltip on right">
                MDBTooltip on right
                </MDBTooltip>
              <MDBTooltip
                placement="bottom"
                componentClass="btn btn-primary"
                tag="div"
                component="button"
                tooltipContent="MDBTooltip on bottom">
                MDBTooltip on bottom
                </MDBTooltip>
              <MDBTooltip
                placement="left"
                componentClass="btn btn-primary"
                tag="div"
                component="button"
                tooltipContent="MDBTooltip on left">
                MDBTooltip on left
                </MDBTooltip>
            </div>
          )
        
        }
        
        export default TooltipsPage;
      

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';
      

API Reference: Properties

Name Type Default Description Example
arrowClass String Adds custom class to the Tooltip arrow <MDBTooltip arrowClass="myCustomClass" ... />
component String Defines custom tag of the tooltip aimed component <MDBTooltip component="button" ... />
componentClass String Adds custom class to the tooltip aimed component <MDBTooltip componentClass="btn btn-primary" ... />
className String Adds custom class to the element which wraps tooltip aimed component. <MDBTooltip className="myCustomClass" ... />
placement String Determines tooltip placement. Choose from left | right | top | bottom <MDBTooltip placement='top' ... />
tag String Sets custom tag for the element which wraps tooltip aimed component. <MDBTooltip tag="div" ... />
tooltipClass String Sets Tooltip's custom class <MDBTooltip tooltipClass="myCustomClass" ... />
tooltipContent String Sets Tooltip text <MDBTooltip tooltipContent="MDBTooltip on left" ... />
wrapperStyle Object Applies custom style rules for the element which wraps tooltip aimed component . <MDBTooltip wrapperStyle={{background: "red"}} ... />