1
votes

Classes personnalisées pour v-b-tooltip

Je souhaite créer différentes versions d'infobulles d'amorçage, vert rouge, etc. Donc, d'après ce que je lis sur le https://bootstrap-vue.js.org / docs / components / tooltip / J'ai besoin de définir un élément conteneur, puis de le styliser en conséquence,

J'ai essayé: container = "tooltip-container" et: container = "'tooltip-container'" mais aucun fonctionne, je trace le dom et mon info-bulle n'a pas de div parent avec l'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>

vue.js twitter-bootstrap

0 commentaires

3 Réponses :

2
votes

Pour afficher l'info-bulle sur cette étendue , vous utiliseriez:

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

Pour autant que je sache, seul le titre peut être spécifié à l'aide d'un attribut distinct. Pour les autres options de configuration, vous devez soit utiliser des modificateurs de directive (tels que vb-tooltip.hover.click ), soit transmettre une valeur à la directive (telle que vb-tooltip = "{trigger : 'hover click'} ".

0 commentaires

0
votes

Notez également que pour les accessoires d'options tels que "custom-class", la syntaxe serait:

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

0 commentaires

0
votes

J'ai utilisé des popovers pour cela.

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

0 commentaires