React - Material ui tooltip arrow is not align to the buttons/container

user_9050897 0
Viewed 5303

I am trying to use Material Ui tooltip inside Appbar, but the tooltip is not aligned to the icon or to the container

enter image description here

the same when using the simple tooltip example from docs :

  <Tooltip title="Delete" arrow>
      <IconButton>
          <NotificationsOutlinedIcon color="primary" />
      </IconButton>
  </Tooltip>

the issue is happening only when using inside an appbar and also because the Text Typography that uses flex-grow, when I remove the text is working, how can I fix that?

my code:

<div className={classes.root}>
  <AppBar position="static">
    <Toolbar>
      {logo}
      <Typography className={classes.title}>
        <ViewDropDownMenu/>
      </Typography>
        <Tooltip title="tooltip" arrow>
            <IconButton aria-label="tooltip">
            <DeleteIcon color="primary" />
        </IconButton>
       </Tooltip>
      {/* </div> */}
    </Toolbar>
  </AppBar>
</div>

style :

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      backgroundColor: theme.palette.background.default
    },
    appbar: {
      justifyContent: 'center',
      height: '100%'
    },
    menuButton: {
      marginRight: theme.spacing(2)
    },
    title: {
      flexGrow: 1,
      textAlign: 'center',  
      color: theme.palette.text.primary
    },
    logo: {
      maxWidth: 79
    }
  })
);

so when I remove the classes.title

material-ui reactjs
1 Answers

From what I have seen in the docs, you should specify the placement of your arrow. You want to put it bottom, in the center. So your placement value should be:

<Tooltip
  arrow
  title={props.title}
  color="inherit"
  placement={"bottom"} // here you should specify your placement value
  PopperProps={{
    disablePortal: shouldDisablePortal
  }}
  open={open}
  disableFocusListener={shouldDisableFocusListener}
  disableHoverListener={props.disableHoverListener}
>
  <span>{props.children}</span>
</Tooltip>

UPDATE (comments)

Tooltip is positioned absolute. It probably has a right property of 0. If you modify your scrollbar width, it will get positioned relative to that new width, making your tooltip appear a bit to the left.

DISCLAIMER

I am not saying this is the explanation, but I would assume its something related to this or overflow.

user_110238710
Related