title: Missing arrow on tooltip in react-bootstrap
body: <p>So I'm using react-bootstrap to implement a tooltip to my react application.</p>
  <p>When using their tooltip, im not getting any default styling at all to it. So to solve this I had to add some css, however I can only add some css to the body.</p>
  <p>An image to show you what I mean. <a href="https://i.stack.imgur.com/vuES7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vuES7.jpg" alt="enter image description here" /></a></p>
  <p>In my case im missing the arrow. Should the arrow not be there by default?</p>
  <p>I've followed the <a href="https://react-bootstrap.github.io/components/overlays/" rel="nofollow noreferrer">https://react-bootstrap.github.io/components/overlays/</a> and have followed the examples they've given me.</p>
  <pre><code>&lt;OverlayTrigger
    placement=&quot;right&quot;
    overlay={
      &lt;Tooltip id=&quot;tooltip-right&quot;&gt;
        Tooltip on &lt;strong&gt;Right&lt;/strong&gt;.
      &lt;/Tooltip&gt;
    }
  &gt;
    &lt;Button variant=&quot;secondary&quot;&gt;Tooltip on right&lt;/Button&gt;
  &lt;/OverlayTrigger&gt;
  </code></pre>
  <p>CSS</p>
  <pre><code>.tooltip {
      background: #333;
      border-radius: 5px;
      padding: 10px;
      color: whitesmoke;
      margin-left: 5px;
  }
  
  .tooltip-arrow {
      content: &quot;&quot;;
      background: #333;
  }
  </code></pre>
  <p>UPDATE: Solved by creating my own arrow with css:</p>
  <pre><code> .tooltip::after {
      position: absolute;
      left: -7px;
      top: 43%;
      content: '';
      width: 15px;
      height: 15px;
      background: #333;
      transform: rotate(45deg);
  }
  </code></pre>
  <p>But it's a temporary solution only, hoping to know why the default arrow isn't displaying.</p>