CODEWITHSUNDEEP
javascriptcssreactjstypescriptmaterial-ui
SKR Sama
SKR Sama

Reputation: 186

How to Add Arrow to material UI popover Like ToolTip

I would like to add Add an Arrow to the Popover as we have for the ToolTip

enter image description here enter image description here

Is there any possibility to Add an Arrow ??

Upvotes: 4

Views: 6547

Answers (3)

Typing
Typing

Reputation: 167

Try the following:

import { Popover, type PopoverProps } from '@mui/material';

/**
 * The `Popover` that:
 * - is positioned at the bottom-right of the `anchorEl`, and
 * - has an arrow pointing to the `anchorEl`.
 */
export const PopoverWithArrow = (popoverProps: Omit<PopoverProps, 'anchorOrigin' | 'transformOrigin'>) => (
  <Popover
    anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
    transformOrigin={{ horizontal: 'right', vertical: -5 }}
    slotProps={{
      paper: {
        sx: {
          overflow: 'visible',
          '&:before': {
            content: '""',
            display: 'block',
            position: 'absolute',
            top: 0,
            right: 8,
            width: 10,
            height: 10,
            backgroundColor: 'inherit',
            transform: 'translateY(-50%) rotate(45deg)',
            boxShadow: '-3px -3px 5px -2px rgba(0,0,0,0.1)',
          },
        },
      },
    }}
    {...popoverProps}
  />
);

To use, simply give it an anchor:

<PopoverWithArrow anchorEl={anchorEl}>
  <h1>Your awesome Popover body content</h1>
</PopoverWithArrow>

Popover with Arrow preview

Upvotes: 4

molecule
molecule

Reputation: 140

MUI docs has an example with arrow. And the code of this example can be found in their repo, which makes everything clear about the usage of modifiers and implementation of arrowRef

Upvotes: 0

chaos505
chaos505

Reputation: 496

According to the documentation, this snippet will do what you require enter image description here

modifiers={[
    {
        name: 'arrow',
        enabled: true,
        options: {
            element: arrowRef,
        },
    },
]}

See scroll playground https://mui.com/components/popper/

Upvotes: 6

Related Questions