Multiple portals in the DOM

[Sergey7709]

Please clarify why the table creates so many

in the DOM? Is there any way to change this?

[KevinVandy]

They're for tooltips, popovers, menus and modals. You can lower the amount of these portals by making all Mantine tooltips share 1 portal. In my Mantine theme, I do:

<MantineProvider
  theme={createTheme({
    //...
    components: {
      //...
      Tooltip: {
        defaultProps: {
          withArrow: true,
          portalProps: {
            target: '.mantine-tooltips', // all tooltips share 1 portal
          },
        },
      },
      //..
    },
  })}
>
  {children}
</MantineProvider>

and then just make an empty div in the body of my HTML with that class.

Not really practical to do the same for Modals, Popovers and menus, as they can sometimes need to both be on screen at once, but this makes sense for Tooltips.

[Sergey7709]

Thank you!