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