Tooltips

Styles

You will find all the styles for these components in
src/assets/jss/nextjs-material-kit/tooltipsStyle.js.

Example

import React from "react";
// material-ui components
import { makeStyles } from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";
// core components
import Button from "/components/CustomButtons/Button.js";


import styles from "/styles/jss/nextjs-material-kit/tooltipsStyle.js";

const useStyles = makeStyles(styles);

export default function Tooltips(){
  const classes = useStyles();
  return (
    <div>
      <h1>Tooltips</h1>
      <h2>Example</h2>
      <Tooltip
        id="tooltip-left"
        title="Tooltip on left"
        placement="left"
        classes={{ tooltip: classes.tooltip }}
      >
        <Button>On left</Button>
      </Tooltip>
      <Tooltip
        id="tooltip-top"
        title="Tooltip on top"
        placement="top"
        classes={{ tooltip: classes.tooltip }}
      >
        <Button>On top</Button>
      </Tooltip>
      <Tooltip
        id="tooltip-bottom"
        title="Tooltip on bottom"
        placement="bottom"
        classes={{ tooltip: classes.tooltip }}
      >
        <Button>On bottom</Button>
      </Tooltip>
      <Tooltip
        id="tooltip-right"
        title="Tooltip on right"
        placement="right"
        classes={{ tooltip: classes.tooltip }}
      >
        <Button>On right</Button>
      </Tooltip>
    </div>
  );
}

Props

Please check out the official material-ui documentation.