[tooltip] Controlled state does not work

[alyssaButlerIntegrityNext]

Steps to reproduce

Link to live example: (Mui Website, Controlled Tooltips Section)

Steps:

1. Click on the "CONTROLLED" button in the demo on the MUI webpage for Controlled Tooltips
2. The tooltip should show or hide depending on the button click.

Current behavior

The tooltip appears on hover, the button click appears to have no effect on the tooltip.

Expected behavior

The tooltip is not controlled by hover interactions but by button click. When I click on the button once, the tooltip should stay open even when I move my mouse away from the button. When I click the button again, the tooltip should disappear.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: tooltip

[sai6855]

@alyssaButlerIntegrityNext, I think there isn’t a need for the Button in the demo. The intention of the demo is to show how to control the open prop, which it’s already doing. Maybe we can remove the Button from the demo as it’s a bit confusing.

[alyssaButlerIntegrityNext]

Fair point, however the behavior is still not as I would expect as the hover interaction stays even with a controlled component. I have a video here of the sandbox from the demo, even if I set the prop open, when I hover the Tooltip no longer is controlled. My expectation is that the tooltip should only change on button click, is that incorrect?

Screen.Recording.2024-10-02.at.16.09.22.mov

[sai6855]

import * as React from 'react';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';

export default function ControlledTooltips() {
  const [open, setOpen] = React.useState(false);

  const handleClick = () => {
    setOpen(val=>!val);
  };

  return (
    <Tooltip open={open} title="Add">
      <Button onClick={handleClick} >Controlled</Button>
    </Tooltip>
  );
}

@alyssaButlerIntegrityNext If you want Button onClick to control Tooltip, you can try above code.

---

Note to maintainers: I still think we should remove Button from demo, as it's bit unusual to open Tooltip on Button click

[github-actions]

👋 Thanks for using this project!

We use GitHub issues exclusively as a bug and feature requests tracker, however, this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.

[oliviertassinari]

Overall, It looks like we are asking support questions, so we are in the wrong place.

---

Note to maintainers: I still think we should remove Button from demo, as it's bit unusual to open Tooltip on Button click

Tooltips are meant to be used with buttons, so I don't see how we could use anything else.