bootstrap 4 стилей подсказок

Question

Я использую bootstrap 4, и я попытался стилизовать всплывающую подсказку.

CSS

tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

HTML

<label  class="d-flex flex-column col-md-6"  style="text-align: left" for="DoubleSided">Does this design need to be double sided?</label>
            <div class="input-group mb-3 col-md-6">
                <select required class="form-control" aria-describedby="basic-addon3" name="Double Sided" id="DoubleSided">
     <option value="" selected disabled>Please select</option>
    <option>Yes</option>
    <option>No</option>
                 </select>
                <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon2">
         <a class='tooltip' data-toggle="tooltip" data-placement="left" title="Tooltip here">
         <i class="fa fa-info-circle" data-toggle="tooltip" aria-hidden="true">

             </i></a>

                    </span>
  </div>
</div>

Вот как это выглядит, ни один из стиль применяется к всплывающей подсказке

Есть ли какие-либо предложения, как мне сделать так, чтобы подсказка выглядела так?