我做了一个导航栏组件，我使用JSX，在这个组件中，我想使用工具提示，但当我想使用工具提示，我必须手动编码每个工具提示与标题 prop 。
举例来说：

import * as React from 'react';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

export default function BasicTooltip() {
  return (
    <Tooltip title="Delete">
      <IconButton>
        <DeleteIcon />
      </IconButton>
    </Tooltip>
  );
}

字符串
这是来自Material-UI（MUI）站点的官方代码忽略图标按钮和图标我有自己的图标。

import { Button, styled } from "@mui/material";
import React from "react";
import {
  AccountCircleIcon,
  WorkIcon,
  LocalActivityIcon,
  PersonIcon,
  CategoryIcon,
  AssessmentIcon,
  Company,
  LogoutIcon,
} from "../assets/icons";
import "../styles/Navbar.css";
import useAlert from "../hooks/useAlert";

const Navbar = () => {
  const { notify, Toaster } = useAlert();

  const CustomButton = styled(Button)({
    backgroundColor: "#D6E4EC",
    color: "#2F4F4F",
    "&:hover": {
      backgroundColor: "#abc4ff",
      color: "#2b2d42",
    },
  });

  return (
    <div className="navbar">
      <img src={Company} className="company-logo " alt="company-logo" />
      <Toaster />
      <ul>
        <li className="nav-item">
          
          <CustomButton
            className="Button"
            size="small"
            startIcon={<AccountCircleIcon />}
            onClick={() => notify("Account")}
          >
            Account
          </CustomButton>
          
        </li>
        <li className="nav-item">
          <CustomButton
            className="Button"
            startIcon={<WorkIcon />}
            size="small"
          >
            Opportunities
          </CustomButton>
        </li>
        <li className="nav-item">
          <CustomButton
            className="Button"
            startIcon={<LocalActivityIcon />}
            size="small"
          >
            Activities
          </CustomButton>
        </li>
        <li className="nav-item">
          <CustomButton
            className="Button"
            startIcon={<PersonIcon />}
            size="small"
          >
            People
          </CustomButton>
        </li>
        <li className="nav-item">
          <CustomButton
            className="Button"
            startIcon={<CategoryIcon />}
            size="small"
          >
            Products
          </CustomButton>
        </li>
        <li className="nav-item">
          <CustomButton
            className="Button"
            startIcon={<AssessmentIcon />}
            size="small"
          >
            Reports
          </CustomButton>
        </li>
        <li className="nav-item">
          <CustomButton
            className="Button"
            startIcon={<LogoutIcon />}
            size="small"
          >
            Logout
          </CustomButton>
        </li>
      </ul>
    </div>
  );
};

export default Navbar;

型
我试过做一个自定义挂钩，但它不是工作的方式，我想。