0

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

enter image description here

tao
  • 82,996
  • 16
  • 114
  • 150
Appu
  • 35
  • 5
  • Where is the CSS placed? – tao Mar 31 '23 at 00:38
  • Does this answer your question? [Change Bootstrap tooltip color](https://stackoverflow.com/questions/17642447/change-bootstrap-tooltip-color) – HDP Mar 31 '23 at 05:05

0 Answers0