[material-ui][SpeedDial] Bug with right/left direction in persistent action tooltips

[bjovanovic123]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/sad-voice-hnlnfk?file=%2Fsrc%2FDemo.js%3A41%2C24

Steps:

1. Go to the example link
2. Hover over SpeedDial to open Speed Dial Actions

Current behavior

Speed Dial Actions are over Tooltips, covering them, and don't look good:

Expected behavior

Tooltips should be visible and styled correctly when the direction is horizontal.

With SpeedDial direction="right" or direction="left", Tooltips should be placed on top or bottom of action buttons. I've tried passing tooltipPlacement="top" to SpeedDialAction, but it doesn't work

Context

No response

Your environment

Using Chrome browser. ``` System: OS: macOS 13.5.1 CPU: (8) x64 Apple M1 Pro Memory: 26.90 MB / 32.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.12.1 - ~/.nvm/versions/node/v14.18.2/bin/npm Managers: Homebrew: 4.2.3 - /usr/local/bin/brew pip2: 19.2.3 - /Library/Frameworks/Python.framework/Versions/2.7/bin/pip2 pip3: 21.2.4 - /Library/Frameworks/Python.framework/Versions/3.9/bin/pip3 RubyGems: 3.0.3.1 - /usr/bin/gem Utilities: Make: 3.81 - /usr/bin/make GCC: 15.0.0 - /usr/bin/gcc Git: 2.37.3 - /usr/local/bin/git Clang: 15.0.0 - /usr/bin/clang Curl: 8.1.2 - /usr/bin/curl Servers: Apache: 2.4.56 - /usr/sbin/apachectl Virtualization: Docker: 24.0.6 - /usr/local/bin/docker SDKs: iOS SDK: Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2 IDEs: IntelliJ: 2020.3.1 VSCode: 1.85.1 - /usr/local/bin/code Vim: 9.0 - /usr/bin/vim Xcode: 15.2/15C500b - /usr/bin/xcodebuild Languages: Bash: 3.2.57 - /bin/bash Java: 15.0.2 - /usr/bin/javac Perl: 5.30.3 - /usr/bin/perl Python: 2.7.18 - /Library/Frameworks/Python.framework/Versions/2.7/bin/python Python3: 3.9.10 - /Library/Frameworks/Python.framework/Versions/3.9/bin/python3 Ruby: 2.6.10 - /usr/bin/ruby Databases: SQLite: 3.39.5 - /usr/bin/sqlite3 Browsers: Chrome: 121.0.6167.160 Edge: 121.0.2277.112 Safari: 16.6 ```

Search keywords: This issue has not been reported

[EyaOuenniche]

I reproduced the bug and I confirm the issue. when you remove the direction="right" it works but when I added the direction="right", Speed Dial Actions are over Tooltips, covering them

[ZeeshanTamboli]

Thanks for reporting. It's a bug. Would you like to create a PR?

[EyaOuenniche]

Hello! Of course I would like to work on this issue

[EyaOuenniche]

hello again! While reviewing the code of @bjovanovic123, I may have the suggestion that will solve this issue. To ensure that the tooltips are displayed correctly above or below the action buttons in the SpeedDial component when the direction is horizontal (direction="right" or direction="left"), we can adjust the tooltipPlacement dynamically based on the direction of the SpeedDial. Here is a suggestion of how the code would look like:

import React, {useState} as React from "react";
import Box from "@mui/material/Box";
import Backdrop from "@mui/material/Backdrop";
import SpeedDial from "@mui/material/SpeedDial";
import SpeedDialIcon from "@mui/material/SpeedDialIcon";
import SpeedDialAction from "@mui/material/SpeedDialAction";
import FileCopyIcon from "@mui/icons-material/FileCopyOutlined";
import SaveIcon from "@mui/icons-material/Save";
import PrintIcon from "@mui/icons-material/Print";
import ShareIcon from "@mui/icons-material/Share";
const actions = [
  { icon: <FileCopyIcon />, name: "Copy" },
  { icon: <SaveIcon />, name: "Save" },
  { icon: <PrintIcon />, name: "Print" },
  { icon: <ShareIcon />, name: "Share" },
];

export default function App() {
  const [open, setOpen] = useState(false);
  const [direction, setDirection] = useState("right");

  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  const handleDirectionChange = (newDirection) => {
    setDirection(newDirection);
  };

  return (
    <Box sx={{ height: 330, transform: "translateZ(0px)", flexGrow: 1 }}>
      <Backdrop open={open} />
      <SpeedDial
        ariaLabel="SpeedDial tooltip example"
        sx={{ position: "absolute", bottom: 16, right: 16 }}
        icon={<SpeedDialIcon />}
        onClose={handleClose}
        onOpen={handleOpen}
        open={open}
        direction={direction}
        onDirectionChange={handleDirectionChange}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            tooltipOpen={open && direction === "down"}
            tooltipPlacement={direction === "right" || direction === "left" ? "top" : "left"}
            onClick={handleClose}
          />
        ))}
      </SpeedDial>
    </Box>
  );
}

[ZeeshanTamboli]

@EyaOuenniche Even with tooltipPlacement set to top or bottom, it doesn't behave as expected. Additionally, the Speed Dial component does not have onDirectionChange prop.

[ashr81]

I was blocked for one of my feature developments. So, I fixed the issue in this PR here faster. @EyaOuenniche, my apologies for intervening and taking over the task. I needed to resolve it to continue progress on my work faster. Feel free to decline, if you have a better solution. 🙏🏽