title: Bootstrap 4 tooltip arrow shadow styling
body: <p>This is the tooltip's arrow without shadow:</p>
  
  <p><a href="https://i.stack.imgur.com/8gmO1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8gmO1.png" alt="enter image description here"></a></p>
  
  <p>I'm trying to shadow it but since the arrow is made out of borders I've been unable to render a proper result. Getting the following:</p>
  
  <p><a href="https://i.stack.imgur.com/ZDJx1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ZDJx1.png" alt="enter image description here"></a></p>
  
  <p><strong>Any ideas how to integrate the arrow part's shadow to the rest of the tooltip?</strong> (Snippet below)</p>
  
  <p>Checked the <a href="https://stackoverflow.com/questions/50727753/bootstrap-tooltip-arrow-style">following</a> and some others but couldn't find a shadow specific scenario. </p>
  
  <p>Thank you.</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>$('[data-toggle="tooltip"]').tooltip('show');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html body {
    background: #eee;
  }
  
  button.btn {
    margin-top: 100px;
  }
  
  .tooltip-inner {
    background-color: white !important;
    color: gray !important;
    border-radius: 0 !important;
    box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
  }
  
  .bs-tooltip-right .arrow::before {
    border-right-color: white !important;
    box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Something"&gt;
    Some tooltip
  &lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>