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.

Custom classes for <b-popover> and <b-tooltip> components

See original GitHub issue

At the moment it’s not possible to give the popover container a custom class. If you do a <b-popover class="info">...</b-popover> right now, your class just won’t be added.

Usecases:

Popovers with different contexts and therefore different styles (e.g. ‘info’, ‘action’, ‘important’ etc)
Popovers with dynamic class binding to states (e.g. class ‘moving’ to give the popover some opacity while its target is beeing dragged)

Issue Analytics

State:
Created 5 years ago
Reactions:15
Comments:19 (13 by maintainers)

Top GitHub Comments

3reactions

tmorehousecommented, Jul 10, 2019

@haggins @garhbod @lazehang @michaelzangl @ggedde

BootstrapVue 2.0.0-rc.26 has been released.

It contains support for color variants on tooltips/popovers as well as a the ability to apply an arbitrary class to the root element of the rendered tooltip/popover.

Refer to the docs for more details https://bootstrap-vue.js.org

3reactions

tmorehousecommented, Feb 13, 2019

We are going to be revamping tooltips, popovers, modal, and the forthcoming toast components once Portal-Vue 2.0.0 move out of beta, so we will be adding in this feature at that point in time.

Top Results From Across the Web

twitter bootstrap - Custom classes for v-b-tooltip - Stack Overflow

So from what I am reading on the https://bootstrap-vue.js.org/docs/components/tooltip/ I need to define a container element and then style ...

Popover | Components - BootstrapVue

The Popover feature provides a tooltip-like behavior, can be easily ... A custom class can be applied to the popover outer wrapper <div>...

[Solved]-Custom classes for v-b-tooltip-Vue.js

I've used popovers for this. <div :id="'hoverBtnId'"> <b-button size="sm" variant="link" v-b-tooltip.hover>Something to hover</b-button> </div> <b-popover ...

Bootstrap 3 Tooltip & Popover Custom Classes - CodePen

Extends Bootstrap Tooltips and Popovers by adding custom classes. Define your own custom class or use the predefined custom classes: tooltips: .too...

Tooltips - Bootstrap

Documentation and examples for adding custom Bootstrap tooltips with CSS and ... <button type="button" class="btn btn-secondary" data-toggle="tooltip" ...