工具提示在引导程序中不改变颜色 4

Question

我正在尝试将背景颜色添加到我的工具提示中，但它并没有从黑色改变它的颜色。类似问题提供的尝试方法，但没有任何效果。我正在使用 Bootstrap 4 和 Vue 3。

模板代码：

<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>

脚本：

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;
}