Nextjs Tooltips

Pro Component

A Bootstrap tooltip plugin is a small pop-up element that appears while the user moves the mouse pointer over an element.
Keep reading these examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

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-material-ui-v4-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:

Tooltip API