Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Changing popover background color on tooltip

See original GitHub issue

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:

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

        <div tabindex="-1"
             class="popover fade"
             :class="[classState ? 'show' : '', popoverAlignment]"
            <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>


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

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

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.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17 (8 by maintainers)

github_iconTop GitHub Comments

laneelliottcommented, Aug 14, 2018

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?

tmorehousecommented, May 28, 2017

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:


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


/* 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Change bootstrap popover background color - Stack Overflow
And to change the background of the arrow (pseudo element), you would use: .popover.bottom .arrow:after { border-bottom-color: tomato; }.
Read more >
How to Change the Bootstrap 5 Tooltip Background Color
You can add different Bootstrap 5 tooltip directions by changing top , right , left , bottom in the data-bs-palcement . By aiming...
Read more >
How to change color of tooltip element using Bootstrap
Now, let's learn how to create a tooltip element and change its color using the Bootstrap framework. Step 1: First import all the...
Read more >
lightning - Change color of popover in lighting:helptext
You can change font color and background of lighting:helptext popover by overriding CSS style within yourComponent.css file.
Read more >
Bootstrap Change Tooltip background color | example | How To
Bootstrap Change Tooltip Background Color: Sometimes we need to change the tooltip background color in Bootstrap. There are many ways to do ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found