Changing popover background color on tooltip

I’m currently trying to figure out how to use the popover-style object correctly and the documentation doesn’t really provide what I’m supposed to be passing to change styling. From the popover component I have gathered it finds a style:

<template>
    <div>
        <span ref="trigger"><slot></slot></span>

        <div tabindex="-1"
             class="popover fade"
             :class="[classState ? 'show' : '', popoverAlignment]"
             ref="popover"
             @focus="$emit('focus')"
             @blur="$emit('blur')"
             :style="popoverStyle"
        >
            <div class="popover-arrow"></div>
            <h3 class="popover-title" v-if="title" v-html="title"></h3>
            <div class="popover-content">
                <div class="popover-content-wrapper">
                    <slot name="content"><span v-html="content"></span></slot>
                </div>
            </div>
        </div>

    </div>
</template>

So I have tried adding the popover-style attribute with an object containing a background property as below:

<template>
  <div class="col-lg-2">
    <div class="tech-block">
      <b-tooltip :content="name" popover-style="{background: #ffffff;}" placement="bottom">
        <img ref="image" class="img-fluid" :src="src">
      </b-tooltip>
    </div>
  </div>
</template>

I’m not really sure how I’m supposed to be changing the background of this popover really at all as the documentation isn’t clear of what it is expecting and can do.

[laneelliott]

This appears to still be an issue even after the release of Bootstrap V4. Now that Popper.js is being used, and specifically Tooltip.js for the tooltips, none of the previous workarounds are working for me anymore. Can we please reopen this issue?

[tmorehouse]

One option to get around this for now would be to add a class to <b-tooltip>, and then target the tooltip-inner as so:

HTML:

<b-tooltip class="blue-tip" content="Online!" show>
    <b-btn variant="outline-success">Live chat</b-btn>
</b-tooltip>

CSS:

/* tooltip background color */
.blue-tip .tooltip-inner {
   background-color: #44f !important;
   color: #fff !important;
}
/* arrrow color */
.blue-tip .tooltip-inner::before {
   border-top-color: #44f !important;
}

The !important’s may not be needed depending on when your custom CSS is imported.