Add support for forwarding ref inside tooltip

[liorp]

When inserting a button inside a tooltip, the positioning is wrong.

Example:

import React from 'react';
import Menu from "@material-ui/core/Menu"
import MenuItem from "@material-ui/core/MenuItem"
import { bindMenu, bindToggle, usePopupState } from 'material-ui-popup-state/hooks'
import IconButton from "@material-ui/core/IconButton";
import SettingsIcon from "@material-ui/icons/Settings";
import Tooltip from "@material-ui/core/Tooltip";


export function UserSettings() {
    const popupState = usePopupState({variant: 'popover', popupId: 'userSettings'})
    
    return (
        <>
            <Tooltip title="Settings" aria-label="settings">
                <IconButton {...bindToggle(popupState)}>
                    <SettingsIcon />
                </IconButton>
            </Tooltip>
            <Menu {...bindMenu(popupState)}>
                <MenuItem>bla</MenuItem>
            </Menu>
        </>
    )
}

[liorp]

Apparently it happens when the height and width of the popover change dynamically. Is there anything I should do regarding styling?

[jedwards1211]

What positioning were you expecting? I'm not seeing this change the position of the Menu or the tooltip.

If you want the Menu to show below the button for example, you'll need to use anchorOrigin, transformOrigin, and getContentAnchorEl={null}:

const TriggerMenu = () => (
  <PopupState variant="popover" popupId="demoMenu">
    {(popupState) => (
      <div>
        <Button variant="contained" {...bindTrigger(popupState)}>
          Open Menu
        </Button>
        <Menu
          {...bindMenu(popupState)}
          getContentAnchorEl={null}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
        >
          <MenuItem onClick={popupState.close}>Cake</MenuItem>
          <MenuItem onClick={popupState.close}>Death</MenuItem>
        </Menu>
      </div>
    )}
  </PopupState>
)

[jedwards1211]

@liorp any tips on how I can reproduce this? See my previous comment

[liorp]

It was a problem with my code changing the height dynamically, which led to troubles with the positioning of the tooltip. Fixed the code, problem gone :)