3

The intended behavior is to go to another page when tooltip is clicked. to achieve this functionality I provided the onClick prop for the PopperProps object.

Below is my code:

interface Props extends TooltipProps{}

const CustomTooltip : React.FC<Props> = (props) => {
  const { arrow, ...classes } = useStylesBootstrap();
  const [arrowRef, setArrowRef] = React.useState<HTMLSpanElement | null>(null);

  const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    event.preventDefault();
    event.stopPropagation();
    console.log("clicked");
    window.location.replace('/info/contact-us');
  };

  return (
    <Tooltip
      classes={classes}
      PopperProps={{
        style: { border: "1px red solid" },
        onClick: handleClick,
        popperOptions: {
          modifiers: {
            arrow: {
              enabled: Boolean(arrowRef),
              element: arrowRef,
            },
          },
        },
      }}
      {...props}
      title={(
        <>
          {props.title}
          <span className={arrow} ref={setArrowRef} />
        </>
        )}
    />
  );
};
mgh
  • 377
  • 2
  • 4
  • 14
  • 1
    Your error message (and your `Props` interface) look like you are passing a `click` prop to `CustomTooltip` and then passing that through (via `{...props}`) to `Tooltip`. This is unrelated to what you are doing with `PopperProps`. – Ryan Cogswell Apr 30 '20 at 17:07
  • Thanks @RyanCogswell, the error went away but still `onClick` is not working. I also edited my question. – mgh Apr 30 '20 at 17:17
  • 1
    You are putting the `onClick` on a [div that isn't part of the presentation of the tooltip](https://github.com/mui-org/material-ui/blob/v4.9.12/packages/material-ui/src/Popper/Popper.js#L211). The div you would want to target is [this one](https://github.com/mui-org/material-ui/blob/v4.9.12/packages/material-ui/src/Tooltip/Tooltip.js#L509) which there isn't any way to provide additional props to. I think you might be better off using [Popper](https://material-ui.com/components/popper/) directly rather than `Tooltip`. – Ryan Cogswell Apr 30 '20 at 17:40
  • @RyanCogswell So it seems I need to fork material-ui if I want to achieve this functionality? – mgh Apr 30 '20 at 18:22
  • 1
    Forking Material-UI sounds like a fairly extreme solution. One option would be to put more html within the `title` and put the click handler in there. – Ryan Cogswell Apr 30 '20 at 18:58
  • @RyanCogswell I tried that as well. doesn't work either and I don't know why? – mgh Apr 30 '20 at 21:33
  • The way Tooltip is implemented, if the display of the tooltip is triggered by hovering over a different element, it isn't easy to click in the Tooltip without the Tooltip going away (because of no longer hovering over the element that triggered the tooltip). I'm not sure what you're exact use case is, but, again, I think leveraging Popper instead of Tooltip will give you more control over these aspects. – Ryan Cogswell Apr 30 '20 at 21:38
  • @RyanCogswell Actually I control the tooltip with a boolean, when the condition is met, the flag will be true and tooltip shows. so it's not hard to click on it. it's really weird. BTW Thanks! – mgh Apr 30 '20 at 21:54

1 Answers1

5

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

Ryan Cogswell
  • 75,046
  • 9
  • 218
  • 198