Popover arrow addition

I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I’m trying to add customize my Menu components by adding an arrow to them, but unfortunately it looks like that may not be possible. I had hoped the issue had been covered in #10772, but despite the title of that issue, it was only solved for Poppers, not Popovers. I would just use a Popper, but Select components use Menus which use Popovers, and there doesn’t seem to be an escape hatch to override that. I can’t use pseudo elements, since the absolutely positioned element is overflow: hidden, and a pseudo element arrow can’t sit outside of it.

Ideally there could be a prop similar to Poppers modifiers={{ arrow: { enabled: true }}} that adds an element adjacent to the Paper in Popover somewhere around here: https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Popover/Popover.js#L398-L406

Examples 🌈

https://material-ui.netlify.com/components/popper/#scroll-playground

Motivation 🔦

Hopefully this further makes Material UI more themeable.

Issue Analytics

State:
Created 4 years ago
Reactions:12
Comments:6 (2 by maintainers)

Top GitHub Comments

24reactions

markmcdowellcommented, Jan 22, 2021

Not generic but if you override the paper class you can add an arrow (in this case a down arrow):

const styles = (theme: Theme) =>
    createStyles({
        paper: {
            overflowX: "unset",
            overflowY: "unset",
            "&::before": {
                content: '""',
                position: "absolute",
                marginRight: "-0.71em",
                bottom: 0,
                right: 0,
                width: 10,
                height: 10,
                backgroundColor: theme.palette.background.paper,
                boxShadow: theme.shadows[1],
                transform: "translate(-50%, 50%) rotate(135deg)",
                clipPath: "polygon(-5px -5px, calc(100% + 5px) -5px, calc(100% + 5px) calc(100% + 5px))",
            },
        },
    });

...

<Popover classes={{ paper: classes.paper }} >
  {children}
</Popover>

1reaction

oliviertassinaricommented, Dec 4, 2020

@tedpennings You can use the source of the tooltip as inspiration:

https://github.com/mui-org/material-ui/blob/763266ec723f6e2d426342d33c48e5fc478e7cdb/packages/material-ui/src/Tooltip/Tooltip.js#L21-L58

Top Results From Across the Web

Issue #18928 · mui/material-ui - Popover arrow addition

I'm trying to add customize my Menu components by adding an arrow to them, but unfortunately it looks like that may not be...

Customizing twitter bootstrap popover arrow

How can I customise the arrow for the popovers? I already did but changing the classes .arrow and such, but the position of...

arrowOffset | Apple Developer Documentation

Adding the offset value to the center value of the given axis yields the required location for the arrow. Thus, for an arrow...

Popovers

Positioning and arrow direction are managed for you by Popper.js, a powerful popover positioning library we've added as a dependency. These popovers are ......

Popovers · Bootstrap v5.0

Documentation and examples for adding Bootstrap popovers, like those found in iOS, ... $popover-arrow-width: 1rem; $popover-arrow-height: .5rem; ...