title: Re-color Tooltip in Bootstrap 4
body: <p>I'm trying to re-skin/re-format a tooltip in Bootstrap 4, and the original way of doing it doesn't seem to work anymore. Currently I am doing this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.tooltip-inner {
      background: #7abcff; 
      background: -webkit-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
      background:    -moz-linear-gradient(top, #7abcff 0%,#60abf8 44%,#4096ee 100%); 
      background:   linear-gradient(to bottom, #7abcff 0%,#60abf8 44%,#4096ee 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); 
      color: #fff;
      font-family: 'Roboto', Arial, sans-serif;
  }
  .tooltip.top .tooltip-arrow {
      border-top-color: #7abcff;
  }
  </code></pre>
  
  <p><code>.tooltip-inner</code> is working fine, but <code>.tooltip.top .tooltip-arrow</code> isn't; it stays black. I am assuming <code>.tooltip.top</code> is the arrow on top of a bottom aligned tooltip.</p>
  
  <p>Any help would be greatly appreciated</p>