React Bootstrap Tooltips
React Tooltips - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
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
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
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;
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} />
|