React-bootstrap OverlayTrigger is not positioned correctly while container has overflow: auto

问题

EDIT: Solution found:

popperConfig={{
    modifiers: {
        preventOverflow: {
            boundariesElement: 'offsetParent'
        }
    }
}}

Adding this to OverlayTrigger makes difference. I am leaving question if anyone had same issue.

I've got a problem while rendering content using react-bootstrap (v1.0.0-beta.5). I have main container with list of buttons and every button is wrapped with OverlayTrigger (Tooltip in overlay). As there are many list items whole container must have 'overflow-x: auto', but it seems to break Tooltips/Overlays positioning (when I remove it from css, overlay is positioned just fine).

I attached a pic. As you can see tooltip is positioned on button instead of being at the top of it.

Can anyone help me with idea how to walk it around?

 .container {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

const editTooltip = <Tooltip id='edit_tooltip'>hello edit tooltip</Tooltip>;

<div className='container'>
   <div className='item-1'>
     <OverlayTrigger
       placement='top'
       overlay={editTooltip}
       delay={700}
      >
       <Button
         variant={'light'}
         bsPrefix={'custom-btn'}
         onClick={() => console.log('clicked')}
      >
        <Icon icon='pencil' />
      </Button>
    </OverlayTrigger>
  </div>
</div>

回答1:

I had an issue where my popper was intended to be on the "bottom-end" of an element - and even though my target appeared to be properly set (and the popper was appended to the body element, so it shouldn't have been constrained by anything), the closer that I got to the bottom of the element containing my target (rows in a table, an icon in each row triggered a popper of options for that row), the popper would seem to get pushed vertically so that it would always appear within the container that the rows lived within. I can't find current documentation that even shows "offsetParent" as an option for boundariesElement...but this solution worked for me. Great find!! (even if I still don't completely understand how you found it...)

Note: My example was just using a simple Overlay component from react-bootstrap, but similar issue/resolution.

来源：https://stackoverflow.com/questions/54915720/react-bootstrap-overlaytrigger-is-not-positioned-correctly-while-container-has-o

标签

javascript

html

css

reactjs

react-bootstrap