title: Troubles styling my bottom positioned popover arrow
body: <p>I am trying to style my popover arrow.</p>
  
  <p>I tried many options found online, but the closest I got to it was like this:
  <a href="https://i.stack.imgur.com/w5kPe.png" rel="nofollow noreferrer">screenshot</a></p>
  
  <p>my code:</p>
  
  <pre><code>    &lt;img src="images/phone1.png" width="100" height="100" id="phoneImg" class="contactImgs" data-toggle="popover" tabindex="50" data-content="test &lt;b&gt;text&lt;/b&gt;" data-placement="right" /&gt;
  
  .popover {
  background-color: #f8be94;
  border:none;
   }
  
  .popover .arrow::before {
      background-color: #f8be94 !important;
  }
  </code></pre>
  
  <p>I need to color the arrow entirely (border and background) in the color mentioned in my code...</p>