web
mobile
Edit these docs Rate these docs

React Bootstrap Tooltips

React Tooltips - Bootstrap 4 & Material Design

Tooltips are a convenient way of presenting additional information to your user. They are tiny little clouds with a brief text message, triggered by clicking on specified element or hovering over it.

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


Examples

Hover over the links below to see tooltips:

Default tooltips

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

                  import React from "react";
                  import { MDBTooltip, MDBContainer } from "mdbreact";
                  
                  const TooltipsPage = () => {
                    return (
                      <MDBContainer>    
                          Tight pants next level keffiyeh{" "}
                          <MDBTooltip
                            domElement
                            tag="span"
                            placement="top"
                          >
                            <span className="blue-text"> you probably </span>
                            <span>Default tooltip</span>
                          </MDBTooltip>
                          haven't heard of them. Photo booth beard raw denim letterpress vegan
                          messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie
                          sustainable quinoa 8-bit american apparel{" "}
                          <MDBTooltip
                            domElement
                            tag="span"
                            placement="top"
                          >
                            <span className="blue-text"> have a </span>
                            <span>Another tooltip</span>
                          </MDBTooltip>{" "}
                          terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
                          thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's
                          cleanse vegan chambray. A really ironic artisan
                          <MDBTooltip
                            domElement
                            tag="span"
                            placement="top"
                          >
                            <span className="blue-text"> whatever keytar </span>
                            <span>Another one here too</span>
                          </MDBTooltip>
                          , scenester farm-to-table banksy Austin{" "}
                          <MDBTooltip
                            domElement
                            tag="span"
                            placement="top"
                          >
                            <span className="blue-text"> twitter handle </span>
                            <span>The last tip!</span>
                          </MDBTooltip>{" "}
                          freegan cred raw denim single-origin coffee viral.
                      </MDBContainer>
                    );
                  };
                  
                  export default TooltipsPage;
                  
              

Material tooltips MDB Pro component

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel have a terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan whatever keytar, scenester farm-to-table banksy Austin twitter handle freegan cred raw denim single-origin coffee viral.

                    import React from "react";
                    import { MDBTooltip, MDBContainer } from "mdbreact";

                    const TooltipsPage = () => {
                      return (
                        <MDBContainer>    
                            Tight pants next level keffiyeh{" "}
                            <MDBTooltip
                              domElement
                              tag="span"
                              material
                              placement="top"
                            >
                              <span className="blue-text"> you probably </span>
                              <span>Default tooltip</span>
                            </MDBTooltip>
                            haven't heard of them. Photo booth beard raw denim letterpress vegan
                            messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie
                            sustainable quinoa 8-bit american apparel{" "}
                            <MDBTooltip
                              domElement
                              tag="span"
                              material
                              placement="top"
                            >
                              <span className="blue-text"> have a </span>
                              <span>Another tooltip</span>
                            </MDBTooltip>{" "}
                            terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo
                            thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's
                            cleanse vegan chambray. A really ironic artisan
                            <MDBTooltip
                              domElement
                              tag="span"
                              material
                              placement="top"
                            >
                              <span className="blue-text"> whatever keytar </span>
                              <span>Another one here too</span>
                            </MDBTooltip>
                            , scenester farm-to-table banksy Austin{" "}
                            <MDBTooltip
                              domElement
                              tag="span"
                              material
                              placement="top"
                            >
                              <span className="blue-text"> twitter handle </span>
                              <span>The last tip!</span>
                            </MDBTooltip>{" "}
                            freegan cred raw denim single-origin coffee viral.
                        </MDBContainer>
                      );
                    };

                    export default TooltipsPage;

                

Four tooltips

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

Default tooltips


                  import React from "react";
                  import { MDBTooltip, MDBContainer, MDBBtn } from "mdbreact";
                  
                  const TooltipsPage = () => {
                    const style = { display: "inline-block", maxWidth: "50vh" };
                    return (
                      <MDBContainer className="text-center p-5">
                        <MDBTooltip placement="top">
                          <MDBBtn color="primary">Top tooltip</MDBBtn>
                          <div>MDBTooltip on top</div>
                        </MDBTooltip>
                  
                        <div>
                          <div style={style} className="text-right">
                            <MDBTooltip placement="left">
                              <MDBBtn color="primary">Left tooltip</MDBBtn>
                              <div>MDBTooltip on left</div>
                            </MDBTooltip>
                          </div>
                  
                          <div style={style} className="text-left">
                            <MDBTooltip placement="right">
                              <MDBBtn color="primary">Right tooltip</MDBBtn>
                              <div>MDBTooltip on right</div>
                            </MDBTooltip>
                          </div>
                        </div>
                  
                        <MDBTooltip placement="bottom">
                          <MDBBtn color="primary">Bottom tooltip</MDBBtn>
                          <div>MDBTooltip on bottom</div>
                        </MDBTooltip>
                      </MDBContainer>
                    );
                  };
                  
                  export default TooltipsPage;
                  
              

Material tooltips MDB Pro component


                  import React from "react";
                  import { MDBTooltip, MDBContainer, MDBBtn } from "mdbreact";
                  
                  const TooltipsPage = () => {
                    const style = { display: "inline-block", maxWidth: "50vh" };
                    return (
                      <MDBContainer className="text-center p-5">
                        <MDBTooltip material placement="top">
                          <MDBBtn color="secondary">Top tooltip</MDBBtn>
                          <div>MDBTooltip on top</div>
                        </MDBTooltip>
                  
                        <div>
                          <div style={style} className="text-right">
                            <MDBTooltip material placement="left">
                              <MDBBtn color="secondary">Left tooltip</MDBBtn>
                              <div>MDBTooltip on left</div>
                            </MDBTooltip>
                          </div>
                  
                          <div style={style} className="text-left">
                            <MDBTooltip material placement="right">
                              <MDBBtn color="secondary">Right tooltip</MDBBtn>
                              <div>MDBTooltip on right</div>
                            </MDBTooltip>
                          </div>
                        </div>
                  
                        <MDBTooltip material placement="bottom">
                          <MDBBtn color="secondary">Bottom tooltip</MDBBtn>
                          <div>MDBTooltip on bottom</div>
                        </MDBTooltip>
                      </MDBContainer>
                    );
                  };
                  
                  export default TooltipsPage;
                  
              

Custom HTML

You can use HTML to customize tooltip's title.

Default tooltip


                  import React from "react";
                  import { MDBTooltip, MDBBtn } from "mdbreact";
                  
                  const TooltipsPage = () => {
                    return (
                      <MDBTooltip placement="bottom" clickable>
                        <MDBBtn color="primary">
                          MD Tooltip with HTML
                        </MDBBtn>
                        <span>
                          <em>Tooltip</em> <u>with</u> <b>HTML</b>
                        </span>
                      </MDBTooltip>
                    );
                  };
                  
                  export default TooltipsPage;
                  
              

Material tooltip MDB Pro component


                  import React from "react";
                  import { MDBTooltip, MDBBtn } from "mdbreact";
                  
                  const TooltipsPage = () => {
                    return (
                      <MDBTooltip material placement="bottom" clickable>
                        <MDBBtn color="secondary">
                          MD Tooltip with HTML
                        </MDBBtn>
                        <span>
                          <em>Tooltip</em> <u>with</u> <b>HTML</b>
                        </span>
                      </MDBTooltip>
                    );
                  };
                  
                  export default TooltipsPage;
                  
              

Material Email Tooltips MDB Pro component


              import React from "react";
              import { MDBTooltip, MDBContainer, MDBBtn } from "mdbreact";
              
              const TooltipsPage = () => {
                const style = { display: "inline-block", maxWidth: "50vh" };
                return (
                  <MDBContainer className="text-center p-5">
                    <MDBTooltip email placement="top">
                      <MDBBtn color="secondary">Top tooltip</MDBBtn>
                      <div>MDBTooltip on top</div>
                    </MDBTooltip>
              
                    <div>
                      <div style={style} className="text-right">
                        <MDBTooltip email placement="left">
                          <MDBBtn color="secondary">Left tooltip</MDBBtn>
                          <div>MDBTooltip on left</div>
                        </MDBTooltip>
                      </div>
              
                      <div style={style} className="text-left">
                        <MDBTooltip email placement="right">
                          <MDBBtn color="secondary">Right tooltip</MDBBtn>
                          <div>MDBTooltip on right</div>
                        </MDBTooltip>
                      </div>
                    </div>
              
                    <MDBTooltip email placement="bottom">
                      <MDBBtn color="secondary">Bottom tooltip</MDBBtn>
                      <div>MDBTooltip on bottom</div>
                    </MDBTooltip>
                    <br/>
              
                    <MDBTooltip email placement="bottom">
                      <MDBBtn color="secondary">MD Tooltip with HTML</MDBBtn>
                      <span><em>Tooltip</em> <u>with</u> <b>HTML</b></span>
                    </MDBTooltip>
                  </MDBContainer>
                );
              };
              
              export default TooltipsPage;
          

Material Smaller Tooltips MDB Pro component


              import React from "react";
              import { MDBTooltip, MDBContainer, MDBBtn } from "mdbreact";
              
              const TooltipsPage = () => {
                const style = { display: "inline-block", maxWidth: "50vh" };
                return (
                  <MDBContainer className="text-center p-5">
                    <MDBTooltip material sm placement="top">
                      <MDBBtn color="secondary" size="sm">
                        Top tooltip
                      </MDBBtn>
                      <div>MDBTooltip on top</div>
                    </MDBTooltip>
              
                    <div>
                      <div style={style} className="text-right">
                        <MDBTooltip material sm placement="left">
                          <MDBBtn color="secondary" size="sm">
                            Left tooltip
                          </MDBBtn>
                          <div>MDBTooltip on left</div>
                        </MDBTooltip>
                      </div>
              
                      <div style={style} className="text-left">
                        <MDBTooltip material sm placement="right">
                          <MDBBtn color="secondary" size="sm">
                            Right tooltip
                          </MDBBtn>
                          <div>MDBTooltip on right</div>
                        </MDBTooltip>
                      </div>
                    </div>
              
                    <MDBTooltip material sm placement="bottom">
                      <MDBBtn color="secondary" size="sm">
                        Bottom tooltip
                      </MDBBtn>
                      <div>MDBTooltip on bottom</div>
                    </MDBTooltip>
                  </MDBContainer>
                );
              };
              
              export default TooltipsPage;
              
          
Edit these docs Rate these docs

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} />