Sign in


Sign up


Bootstrap tooltips

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

                        
import React from 'react';
import { Tooltip } from 'mdbreact';
 
class TooltipsPage extends React.Component {
  render() {
    return (
      <div style={{display: "flex"}}>
        <Tooltip 
          placement="top" 
          componentClass="btn btn-primary"
          tag="div" 
          component="button" 
          tooltipContent="Tooltip on top"> 
            Tooltip on top
        </Tooltip>
        <Tooltip 
          placement="right" 
          componentClass="btn btn-primary"
          tag="div" 
          component="button" 
          tooltipContent="Tooltip on right"> 
            Tooltip on right
        </Tooltip>
        <Tooltip 
          placement="bottom" 
          componentClass="btn btn-primary"
          tag="div" 
          component="button" 
          tooltipContent="Tooltip on bottom"> 
            Tooltip on bottom
        </Tooltip>
        <Tooltip 
          placement="left" 
          componentClass="btn btn-primary"
          tag="div" 
          component="button" 
          tooltipContent="Tooltip on left"> 
            Tooltip on left
        </Tooltip>
      </div>
    )
  }
}