Changing popover background color on tooltip

[LiamDotPro]

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.

[tmorehouse]

Try this:

 <b-tooltip :content="name" :popover-style="{background: '#ffffff'}" placement="bottom">
    <img ref="image" class="img-fluid" :src="src">
 </b-tooltip>

Be sure to include : before the property name (i.e. :popover-style="...") when passing the configuration object. Without the : (shortcut for v-bind:) you are passing a literal string to the component, rather than JavaScript object.

Remember that it takes an object, not a string, so your values (if not a number) should be enclosed in quotes, and this if a style name has a - in it to camelcase the name (i.e. font-size becomes fontSize)

[LiamDotPro]

Updated my own copy and while the tooltip works perfectly still the background still won't change here's what I tried to be sure,

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

Here's a gif of the popover I'm trying to change in case I've not used the correct terminology, The black background on the tooltip is what I'm trying to change which I gathered from the documentation was the popover-style.

[LiamDotPro]

I have also tried targeting the tooltip via css but to no avail using the below;

 .tooltip-inner {
      max-width: 200px;
      padding: 3px 8px;
      color: #fff;
      text-align: center;
      background-color: $primaryColour !important;
      border-radius: .25rem;
    }

I'm presuming that because the tooltip is generated outside of the app itself it either can't see this styling or It needs to be applied after the tooltip has been generated.

[tmorehouse]

Tooltips are handled by the external library tether.js (which generates the tooltips).

I've tried the following: https://jsfiddle.net/43u0rtth/, which uses CSS to change the BG color to blue:

.tooltip-inner {
  background-color: #44f;
}

It appears that the prop popover-style is inherited from popover.vue (tooltip and popover use the same base code), and is not used for tooltips.

The template used by tooltip is a bit differnt than popover:

<template>
    <div>
        <span ref="trigger"><slot></slot></span>
        <div tabindex="-1" :class="['tooltip','tooltip-' + this.placement]"
             ref="popover" @focus="$emit('focus')" @blur="$emit('blur')"
             :style="{opacity:showState?1:0}"
        >
            <div class="tooltip-inner">
                <slot name="content"><span v-html="content || title"></span></slot>
            </div>
        </div>
    </div>
</template>

And doesn't use the popoverStyle property at all

[tmorehouse]

I think we should update the tooltip to be like this, so that popover-style can be applied to the .tooltip-inner div,

Although this wont change the color of the tooltip's arrow :(

[LiamDotPro]

Defining these styles outside the component itself does seem cumbersome and negates the fact we have scoped css blocks, Using your example I added the styles outside of the #app css block like below. Which has solved my issue. Note you'll need to use !important otherwise the styles will not be overridden.

.tooltip {
  .tooltip-inner {
    background-color: $primaryColour !important;
  }

  .tooltip-inner:before {
    border-bottom-color: $primaryColour !important;
  }
}

Perhaps being able to give a background-color and arrow color would be beneficial properties, though a single style property that could also do the text and other parts might be more favorable.

[tmorehouse]

The arrow is done by a pseudo element ::beforeand it's color is controlled by border-top-color CSS,

So it wouldn't be something that can be inherited from the .tooltip-inner class, nor controlled programmatically via the component (as it is completely generated by CSS)

[tmorehouse]

Maybe having the ability to add a class to the .tooltip-inner div would allow you to use a custom class to style the tooltip.

[tmorehouse]

Currently tooltip inherits all code from popover, but doesn't use it all. I propose that we move the common parts out into a mixin, and then make the parts that are not common to both as local props/data in the components. This might help reduce the bit of confusion as to the extra not-used props on tooltip.

Also note that Bootstrap V4 is moving away from tether.js so a lot of this will change once V4 beta 1 is released.

[LiamDotPro]

@tmorehouse I agree with the mixins as having something on the component would make this as easy as it should be. Furthermore thanks for the insight into the oncoming changes! You've been most helpful.

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

[PierBover]

@tmorehouse would you accept a PR with a new revamped tooltip that would accept a color prop and even a component so that users could supply their own tooltip?

[tmorehouse]

Note that tooltips (and popovers) are being changed substantially with the release of Bootstrap V4.beta.1, and the replacement of tether with popper.js. The new tooltips will provide greater control and customization. So you may want to wait until the newest Bootstrap V4 is released.

[PierBover]

Ok awesome 👍

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

[Zamphox]

@laneelliott found a solution here : https://stackoverflow.com/questions/45955722/styling-a-tooltip-popper-js-bootstrap-v4-beta

[Luke-SF]

It seems <b-tooltip :popover-style="{textAlign:'left', whatever:other, css... }"

does not work. There is no mention of it in the popover-style in documentation either here:

https://bootstrap-vue.org/docs/components/tooltip/

Am I missing a step?