title: Styling a tooltip (popper.js / bootstrap v4 beta)
body: <p>I've installed bootstrap v4 beta and with it the popper.js (tooltip.js) library. I'm trying to use it's tooltip function. So I managed to make it appear but I can't change it's appearance/style for the life of me. I've looked over their documentation several times but I can't figure it out. (I just hate a so called "documentation" that doesn't have examples). 
  So here is my html:</p>
  
  <pre><code>&lt;span data-toggle="tooltip" data-placement="right" title="Tooltip on right"&gt;Simple Task Management&lt;/span&gt;
  </code></pre>
  
  <p>I activated it on data-toggle in js:</p>
  
  <pre><code>$(function() {
      $('[data-toggle="tooltip"]').tooltip()
  })
  </code></pre>
  
  <p>I noticed that when the tooltip appears a new div is created with the class "tooltip ..." so I thought I could target that class and style it in my scss, so: </p>
  
  <pre><code>.tooltip {
      background-color: #DB2828;
      color: $green;  
  }
  </code></pre>
  
  <p>Not my intended styling options, just tested to see it work...well the result:
  <a href="https://i.stack.imgur.com/SBg98.png" rel="noreferrer"><img src="https://i.stack.imgur.com/SBg98.png" alt="enter image description here"></a></p>
  
  <p>The same black background with my test background behind it...can someone help me figure this out? Many thanks.</p>