Nextjs Tooltips

-
Pro Component

We’ve restyled this component from Material-UI to give it a more attractive look, and to match the rest of the dashboard.


Style

You will find the styles for this component in assets/jss/nextjs-material-dashboard-pro.js and assets/jss/nextjs-material-dashboard.js inside the tooltip variable.

Example

Unfortunately, we are experiencing some difficulties with our live preview docs, and for some reason, the code demo does not work for this plugin and components. Please check them out here (the tasks edit and delete icons).

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

import {
  tooltip
} from "assets/jss/material-dashboard-pro-react.js";

const styles = {
  tooltip
};

const useStyles = makeStyles(styles);

export default function Tooltips(){
  const classes = useStyles();
  const tooltipClasses = { tooltip: classes.tooltip };
  return (
    <div>
      <Tooltip
        id="tooltip-top"
        title="Refresh"
        placement="top"
        classes={tooltipClasses}
      >
        <Button color="info" justIcon>
          <Refresh />
        </Button>
      </Tooltip>
    </div>
  );
}

Props

You should also check the following props from the base Material-UI components: