Tooltip not changing color in bootstrap 4

Question

I'm trying to add background color to my tooltip but it's not changing it's color from black. Tried methods available from similar question but nothing is working. I'm using Bootstrap 4 and Vue 3.

Template code:

<div id="button-info">
      <a href="#" data-toggle="tooltip" data-placement="right" title="Text!">
        <i data-feather="info" color="black" class="info-icon"></i>
      </a>
</div>

Script:

import $ from 'jquery;
async mounted(){
    this.setRemoteVideo(this.$refs.remoteVideo);
    feather.replace();
    $('[data-toggle="tooltip"]').tooltip();
  },

Css:

.info-icon{
  width: 24px;
  height: 24px;
  cursor: pointer;
  color: var(--white);
}

.info-icon:hover{
  color: var(--secondary-color);
}

.tooltip-inner {
  background-color: #ff0000;
  box-shadow: 0px 0px 4px black;
  opacity: 1 !important;
}

.bs-tooltip-right .arrow::before, 
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-bottom-color: green !important;
}