score:3

Accepted answer

you need to provide the interactive prop for the tooltip. when interactive is not specified, tooltip disables pointer events (so click doesn't do anything), but pointer-events is set to auto when interactive is true. the interactive prop also prevents the tooltip from immediately closing as you move the mouse from the triggering element to the tooltip.

here is a working example:

import react from "react";
import deleteicon from "@material-ui/icons/delete";
import iconbutton from "@material-ui/core/iconbutton";
import tooltip from "@material-ui/core/tooltip";

export default function simpletooltips() {
  return (
    <div>
      <tooltip
        interactive
        title={
          <div onclick={() => console.log("clicked tooltip text")}>delete</div>
        }
      >
        <iconbutton aria-label="delete">
          <deleteicon />
        </iconbutton>
      </tooltip>
    </div>
  );
}

edit interactive tooltip


Related Query

More Query from same tag