react-bootstrap: Popper: CSS "margin" styles cannot be used to apply padding warning when using OverlayTrigger with Popover

That’s intentional. Please follow the instructions in the warning message.

note, it’s not an error, just a warning, visible only on development environments

this is now happening in bootstrap nav dropdowns that i copy and pasted from their docs

its ass

I was getting the same error although I am using react-bootstrap Dropdown and not Overlay. The error was appearing every time I clicked on the Dropdown.Toggle button. So I figured something in the Dropdown itself was causing the error.

I managed to get rid of the error by inserting an inline style with margin: 0 on the Dropdown.Menu item.

Like so:

<Dropdown.Menu style={{ margin: 0 }}>

    <Dropdown.Item>
          .....
    </Dropdown.Item>

</Dropdown.Menu>

Hope it helps someone.

Reproduced the OP code and I do not to get the error when I put style={{ margin: 0 }} on the h1 as follows:

<OverlayTrigger
    trigger="click"
    placement="bottom"
    overlay={<h1 style={{ margin: 0 }}>111111</h1>}
>
    <button>PRESS ME!</button>
</OverlayTrigger>

note, it’s not an error, just a warning, visible only on development environments

Doesn’t mean it has to be there - it’s quite annoying in development tbh 😃

I’ve created a dropwodn list and I was getting this same error whenever I click on it. I solved it by adding style = {{ maring: 0 }} as follows:

          <ul
            // set margin to 0 to prevent default margin
            style={{ margin: 0 }}
            className="dropdown-menu"
            aria-labelledby="navbarDropdown"
          >
            <li>
              // ....
            </li>
            <li>
              // ....
            </li>
            
          </ul>

But i’m not using margin styles. Where could i have these margins?

I’m using Bootstrap 5. Adding m-0 helped me: <ul class="dropdown-menu m-0">

@phil-w Bootstrap 5 uses a JavaScript library called Popper to position overlay elements like tooltips, popovers, dropdowns and such. This warning is appearing in your console because the popper element that is being positioned has a margin style set on it (non-0) which is not supported by the library. How this can happen:

• The browser’s default styles sometimes has a margin on the element, e.g. h1, ul, etc. This margin on these elements should be set to 0 before the element gets positioned.
• The authors of Bootstrap placed a margin on a popper element, even though it’s not supported. The offset modifier should be being used instead, but it’s not. I’m not sure who is responsible for changing this or why it’s throwing a warning now.

Easiest fix to remove the warning is to place a margin: 0 style on the element throwing the warning before the JS runs (with the caveat of dot point 2 meaning it might now no longer have a proper gap between the reference and popper elements — meaning the authors of this library need to fix it at the source).

The reason people are confused is because Popper is a transitive dependency that you never actually interact with directly. It’s like seeing a warning in the console of Google Chrome because the Chromium developers passed in the wrong thing to a library they’re using to build DevTools or something. Hopefully, this is clear.

no i fixed it in #5112 😛

I hope it is not too late! i was getting the same error with Autocomplete component of Material UI. It was caused by an attribute ‘disablePortal’ and disappeared once i removed this attribute, hence i think the margin is applied to a specific attribute of OverlayTrigger too. Hope this helps!

If you are facing this issue in svelte with flowbite-svelte, here is a solution. Simply add !m-0 as a class

<Tooltip class="!m-0">
  No more errors
</Tooltip>

Landed here searching a solution for this warning, while developing in Angular. I added a ngbTooltip and it started outputing the warn. Solved with adding container=“body” (it’s a button in a table cell)

i was suggesting that we add our own helper that deals with the margins at least for stock bootstrap components… we could almost do it in an effect hook, i think. cc @jquense

Conditional margins cause flicker glitch loops with flipping when the axis changes.

remToPx is quite simple:

// you may need to consider iframes too
function remToPx(value) {
  return value * parseFloat(getComputedStyle(document.documentElement).fontSize);
}

remToPx(1.5); // 24

createPopper(reference, popper, {
  modifiers: [
    {
      name: 'offset',
      options: {
        // fully responsive to fontSize changes; 0.5rem margin equivalent
        offset: () => [0, remToPx(0.5)]
      }
    }
  ]
});

There is margin on the popper element for Popovers but not tooltips. I see why this doesn’t occur on the docs site, it’s a dev only warning.

You should replace the [x-placement^=xxxx] conditional margins with the Popper offset modifier, I’m not sure what you are asking me I’m sorry 😞