Tooltip's Arrow Position

[muticansel]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

I want to position the tooltip's arrow just like the tooltip 'placement' prop. For example, when I use "bottom-start" and if the children of the tooltip are long, the arrow is positioned to the right, but I want to position it on the left. Am I missing that feature or is there no option for that?

There is an issue for that https://github.com/mui/material-ui/issues/37651 But the solution is not reusable. I do not know always my tooltip's width. (according to the language and for some different usage on different pages)

Examples 🌈

No response

Motivation 🔦

No response

[brijeshb42]

Please share a minimal reproducible demo for what you are describing.

[muticansel]

https://stackblitz.com/edit/react-qqwxar-wsryis?file=demo.tsx

This is a sample. Arrow is on the middle but I want it to position on the left side of the tooltip

[OmPr366]

@muticansel I have created an Issue #38012 , check Is your same to this or not.

[muticansel]

Hi @OmPr366,

Thanks for your reply but it is similar, not the same. You mentioned that "bottom-start" and "bottom-end" has same behavior but I just want to position the arrow according to the cases. For example, think you gave "bottom-end" but I want to position the arrow on the right-most side of the tooltip or for some cases on the left-most side and etc.

[brijeshb42]

There doesAdding this to the <Tooltip> element moves the arrow to the right end but similar change for left doesn't seem to work,

PopperProps={{
  popperOptions: {
    modifiers: [
      {
        name: "arrow",
        enabled: true,
        options: {
          padding: ({ popper }) => {
            return popper.width - 15;
          },
        },
      },
    ],
  },
}}

I don't think this is supported in popperjs itself but I'll have to confirm.

[mparsakia]

+1 for this