react-popover
react-popover copied to clipboard
Limit popover to viewport
Is there a way to limit the popover so that it never renders outside of the viewport? For example if the child element that the popover is tracking is scrolled outside of the viewport, i'd like the popover to align at the top or bottom of the screen (or the scrollable element)
Maybe something like fixed width on class Popover-body and position left using calc? Look at my code. I avoid bug with popover resize when windows resize + bug with extending out of viewport when for example you have margin-bottom in parent container of page.
.Popover {
margin-top: 20px !important;
left: calc(100% - 370px) !important;
}
.Popover-body {
width: 350px;
display: inline-flex;
flex-direction: column;
padding: 2rem 3rem;
background-color: #005A31;
color: white;
border-radius: 0.3rem;
}