CODEWITHSUNDEEP
twitter-bootstrapvue.js
Petran
Petran

Reputation: 8047

Custom classes for v-b-tooltip

I want to create different versions of bootstrap tooltips, green red etc. 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 accordingly,

I have tried :container="tooltip-container" and :container="'tooltip-container'" but none works, I am tracing the dom and my tooltip has no parent div with id tooltip-container.

<template>
  <span>
    <span id="tooltip-container" class="tooltip-green">
    </span>
    <i v-b-tooltip
     class="btr bt-info-circle text-secondary"
     triggers="hover click"
     :title="text"
     :container="'tooltip-container'"></i>
  </span>
</template>

Upvotes: 1

Views: 3121

Answers (3)

Jason Foglia
Jason Foglia

Reputation: 2531

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 :target="'hoverBtnId'" triggers="hover" placement="top">
    <template v-slot:title>tooltip</template>
    <template v-slot:default>{{'some default tooltip'}}</template>
</b-popover>

Upvotes: 0

smithml
smithml

Reputation: 141

Also note, for option props like "custom-class", the syntax would be:

<i v-b-tooltip="{customClass: 'custom-class-name'}"

Upvotes: 0

skirtle
skirtle

Reputation: 29092

To render the tooltip to that span you would use:

<i v-b-tooltip="{container: '#tooltip-container'}"

As far as I'm aware only the title can be specified using a separate attribute. For the other configuration options you either need to use directive modifiers (such as v-b-tooltip.hover.click) or pass a value to the directive (such as v-b-tooltip="{trigger: 'hover click'}".

Upvotes: 2

Related Questions