Triggers

We can change how tooltips are triggered.

To disable displaying tooltip on hover, we can use the disableHoverListener prop.

The disableFocusListener prop lets us disable display tooltip when we focus on an element.

disableTouchListener lets us disable tooltip display when we touch an element.

For example, we can write:

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 App() {
  return (
    <div>
      <Tooltip title="Delete File" disableFocusListener disableTouchListener>
        <IconButton>
          <DeleteIcon />
        </IconButton>
      </Tooltip>
    </div>
  );
}

to disable the focus and touch listeners.

This way, we’ll see the tooltip if we hover or click on it.

We can also control the opening of the tooltip the way we want.

We can just make it show on click and disappears when we click away.

To do that, we write:

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";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";
export default function App() {
  const [open, setOpen] = React.useState(false);
  const handleTooltipClose = () => {
    setOpen(false);
  };
  const handleTooltipOpen = () => {
    setOpen(true);
  };
  return (
    <div>
      <ClickAwayListener onClickAway={handleTooltipClose}>
        <Tooltip
          open={open}
          title="Delete File"
          disableFocusListener
          disableHoverListener
          disableTouchListener
        >
          <IconButton onClick={handleTooltipOpen}>
            <DeleteIcon />
          </IconButton>
        </Tooltip>
      </ClickAwayListener>
    </div>
  );
}

We added a ClickAwayListener to close the tooltip with the handleTooltipClose function when we click away.

And when we click on the IconButton , the handleTooltipOpen will open the tooltip.

These are done by changing the open state.

We pass it straight into the open prop of the Tooltip .

Also, we have disableFocusListener, disableHoverListener , and disableTouchListener to disable all the listeners.

#web-development #software-development #technology #javascript #programming