title: Wrong arrow placement in react-popper
body: <p>I am currently trying to fix a bug that appeared when using react-popper. It seems that the <code>placement</code> prop is false when there is not enough space above the reference element. In the Screenshot below I can see that the <code>placement</code> prop is <code>top</code> even though it should be <code>bottom</code>. However, it is rather strange that the popper element itself has the correct prop of <code>bottom</code> inside the <code>data-popper-placement</code> prop.</p>
  <p>The arrow in the screenshot should be placed at the beginning of the popover not at the bottom.</p>
  <p><a href="https://i.stack.imgur.com/kPZFN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kPZFN.png" alt="wrong prop" /></a></p>
  <p><strong>The JSX</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import PropTypes from 'prop-types'
  import React, {useState} from 'react'
  import ReactDOM from 'react-dom'
  import {usePopper} from 'react-popper'
  
  import {StyledArrow, StyledBox, StyledBoxWrapper} from './StyledPopover'
  
  const placements = {
    TOP: 'top',
    BOTTOM: 'bottom',
    RIGHT: 'right'
  }
  
  const Popover = ({children, content, isPlainHtml, rimless, placement}) =&gt; {
    const [referenceElement, setReferenceElement] = useState(null)
    const [popperElement, setPopperElement] = useState(null)
    const [arrowElement, setArrowElement] = useState(null)
    const [showToolTip, setShowToolTip] = useState(false)
  
    const handleMouseEnter = () =&gt; {
      setShowToolTip(true)
    }
  
    const handleMouseLeave = () =&gt; {
      setShowToolTip(false)
    }
  
    const modifiers = [
      {
        name: 'offset',
        options: {
          offset: [0, 8]
        }
      },
      {
        name: 'preventOverflow',
        options: {
          padding: 10
        }
      },
      {
        name: 'arrow',
        options: {
          element: arrowElement
        }
      }
    ]
  
    const {styles, attributes} = usePopper(referenceElement, popperElement, {placement, modifiers})
  
    return (
      &lt;&gt;
        &lt;span ref={setReferenceElement} onMouseOut={handleMouseLeave} onMouseOver={handleMouseEnter}&gt;
          {children}
        &lt;/span&gt;
  
        {showToolTip &amp;&amp;
          content &amp;&amp;
          ReactDOM.createPortal(
            &lt;StyledBoxWrapper ref={setPopperElement} style={styles.popper} rimless={rimless} {...attributes.popper}&gt;
              &lt;StyledBox isPlainHtml={isPlainHtml}&gt;{content}&lt;/StyledBox&gt;
              &lt;StyledArrow ref={setArrowElement} data-placement={placement} style={styles.arrow} /&gt;
            &lt;/StyledBoxWrapper&gt;,
            document.body
          )}
      &lt;/&gt;
    )
  }
  
  Popover.defaultProps = {
    isPlainHtml: true,
    rimless: false,
    placement: placements.TOP
  }
  
  Popover.propTypes = {
    /**
     * Content in the popover.
     */
    content: PropTypes.node,
    /**
     * Reference to the popover.
     */
    children: PropTypes.node,
    /**
     * Remove space between content and border if useful (e.g. content is an image only). Default is {false}.
     */
    rimless: PropTypes.bool,
    /**
     * Add typographic styles for nested content. If content is already completely
     * styled disable this option (e.g. styled-components). Default is {true}.
     */
    isPlainHtml: PropTypes.bool,
    /**
     * Content of the popover
     */
    placement: PropTypes.oneOf(Object.values(placements))
  }
  
  export default Popover</code></pre>
  </div>
  </div>
  </p>
  <p><strong>The StyledComponents</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import styled from 'styled-components'
  
  import {StyledHtmlFormatter} from '../FormattedValue/typeFormatters/HtmlFormatter'
  import {declareTypograhpy} from '../Typography'
  import {scale, theme} from '../utilStyles'
  
  const ARROW_WIDTH = 16
  
  const StyledBoxWrapper = styled.div`
    &amp;&amp; {
      pointer-events: none; // prevent flickering of tooltip
      background-color: ${theme.color('backgroundPopover')};
      max-width: 400px;
      z-index: 100000010;
      padding: ${({rimless}) =&gt; (rimless ? '0' : scale.space(0))};
    }
  `
  
  const StyledBox = styled.div`
    &amp;&amp; {
      ${props =&gt; props.isPlainHtml &amp;&amp; declareTypograhpy(props, 'html')};
  
      &amp;,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ${StyledHtmlFormatter} {
        color: ${theme.color('paper')};
      }
    }
  `
  
  const StyledArrow = styled.i`
    position: absolute;
    width: ${ARROW_WIDTH}px;
    height: ${ARROW_WIDTH / 2}px;
    left: 0;
  
    &amp;[data-placement*='bottom'] {
      top: ${ARROW_WIDTH / -2}px;
  
      &amp;:before {
        border-width: 0 ${ARROW_WIDTH / 2}px ${ARROW_WIDTH / 2}px ${ARROW_WIDTH / 2}px;
        border-color: transparent transparent ${theme.color('backgroundPopover')} transparent;
      }
    }
  
    &amp;[data-placement*='top'] {
      bottom: ${ARROW_WIDTH / -2.5}px;
  
      &amp;:before {
        border-width: ${ARROW_WIDTH / 2}px ${ARROW_WIDTH / 2}px 0 ${ARROW_WIDTH / 2}px;
        border-color: ${theme.color('backgroundPopover')} transparent transparent transparent;
      }
    }
  
    &amp;[data-placement*='right'] {
      left: -${ARROW_WIDTH}px;
      top: -6px !important;
  
      &amp;:before {
        border-width: ${ARROW_WIDTH / 2}px;
        border-color: transparent ${theme.color('backgroundPopover')} transparent transparent;
      }
    }
  
    &amp;:before {
      content: '';
      display: block;
      border-style: solid;
      width: 0;
      height: 0;
    }
  `
  
  export {StyledArrow, StyledBox, StyledBoxWrapper}</code></pre>
  </div>
  </div>
  </p>