Changing popover background color on tooltip
See original GitHub issueI’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.
Issue Analytics
- State:
- Created 6 years ago
- Comments:17 (8 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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?
One option to get around this for now would be to add a class to
<b-tooltip>
, and then target thetooltip-inner
as so:HTML:
CSS:
The
!important
’s may not be needed depending on when your custom CSS is imported.