cssbootstrap-4twitter-bootstrap-tooltip

Bootstrap 4 tooltip arrow shadow styling


This is the tooltip's arrow without shadow:

enter image description here

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:

enter image description here

Any ideas how to integrate the arrow part's shadow to the rest of the tooltip? (Snippet below)

Checked the following and some others but couldn't find a shadow specific scenario.

Thank you.

$('[data-toggle="tooltip"]').tooltip('show');
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);
}
<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">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Something">
  Some tooltip
</button>


Solution

  • You can achieve this with a little css magic and applying the styling to the ::after pseudo element. Added the shadow there and dropped the z-index to -1 to sit behind and give the desired effect.

    $('[data-toggle="tooltip"]').tooltip('show');
    html body {
      background: #eee;
      margin: 30px;
    }
    
    .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;
    }
    
    .bs-tooltip-right .arrow::after {
      content: "";
      position: absolute;
      left: 100%;
      z-index: -1;
      border: 5px solid #fff;
      transform-origin: 0 0;
      transform: rotate(45deg);
      box-shadow: 2px 2px 4px 0px rgba(161, 161, 161, 1);
    }
    <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">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Something">
      Some tooltip
    </button>