Comment ajouter bootstrap tooltip dans Vue Js

Vous pouvez utiliser cette directive:

Vue.directive('tooltip', function(el, binding){
    $(el).tooltip({
             title: binding.value,
             placement: binding.arg,
             trigger: 'hover'             
         })
})

Par exemple:

<span class="label label-default" v-tooltip:bottom="'Your tooltip text'">

Ou vous pouvez également lier le texte d'info-bulle pour une variable calculé:

<span class="label label-default" v-tooltip:bottom="tooltipText">

Et dans votre composant de script:

computed: {
    tooltipText: function() {
       // put your logic here to change the tooltip text
       return 'This is a computed tooltip'
    }
}

la bonne façon d'y arriver, c'est d'en faire une directive, pour que vous puissiez vous connecter sur le cycle de vie d'un élément DOM.

https://vuejs.org/v2/guide/custom-directive.html

/* Enable Bootstrap tooltips using Vue directive */
Vue.directive('tooltip', {
    bind: bsTooltip,
    update: bsTooltip,
    unbind (el, binding) {
        $(el).tooltip('destroy');
    }
});
function bsTooltip(el, binding) { 
    let trigger;
    if (binding.modifiers.focus || binding.modifiers.hover || binding.modifiers.click) {
        const t = [];
        if (binding.modifiers.focus) t.push('focus');
        if (binding.modifiers.hover) t.push('hover');
        if (binding.modifiers.click) t.push('click');
        trigger = t.join(' ');
    }

    $(el).tooltip({
        title: binding.value,
        placement: binding.arg,
        trigger: trigger,
        html: binding.modifiers.html
    });
}


//DEMO
new Vue({
  el: '#app',
  data: {
    foo: "Hi",
    bar: "There",
    baz: "<b>Hi</b><br><i>There</i>"
  }
});

<link href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.js"></script>
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>


<div id="app">
  <h4>Bootstrap tooltip with Vue.js Directive</h4>
  <br>
  <button v-tooltip="foo">Hover me</button>
  <button v-tooltip.click="bar">Click me</button>
  <button v-tooltip.html="baz">Html</button>
  <br>
  <button v-tooltip:top="foo">Top</button>
  <button v-tooltip:left="foo">Left</button>
  <button v-tooltip:right="foo">Right</button>
  <button v-tooltip:bottom="foo">Bottom</button>
  <button v-tooltip:auto="foo">Auto</button>
</div>

Bootstrap Vue supporte les tooltips directement via la syntaxe suivante documentée ici.

<b-tooltip content="Tooltip Text">
    <b-btn variant="outline-success">Live chat</b-btn>
</b-tooltip>

L'Installation de Bootstrap Vue est rapide et sans douleur. Voir le guide d'installation rapide pour plus de détails.

Un easyway d'utiliser bootstrap info-bulle dans vuejs

installer boostrap, jquery et popper.js

import 'popper.js'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import jQuery from 'jquery'
//global declaration of jquery
global.jQuery = jQuery
global.$ = jQuery

$(() => {
  $('#app').tooltip({
    selector: '[data-toggle="tooltip"]'
  })
})

si vous utilisez eslint dans vuejs, n'oubliez pas d'ajouter le code ci-dessous .eslintrc.fichier js

env: {
  browser: true,
  "jquery": true
}

et n'oubliez pas de recompiler les vuejs

si vous utilisez les composants de la classe Vue, installez les types jquery:

npm install --save @types/jquery

et déclarez la directive comme ceci dans votre fichier Vue, en dehors de votre component:

Vue.directive('tooltip', function(el, binding) {
    ($(el) as any).tooltip({
           title: binding.value,
           placement: binding.arg,
           trigger: 'hover'             
    })
});

puis utilisez L'exemple HTML / Fixations de la réponse de @Ikbel.

j'ai essayé d'utiliser la solution Postée par Vitim.nous mais j'ai rencontré quelques problèmes (valeurs inattendues/non définies). Voici ma version corrigée et abrégée:

import Vue from 'vue'

const bsTooltip = (el, binding) => {
  const t = []

  if (binding.modifiers.focus) t.push('focus')
  if (binding.modifiers.hover) t.push('hover')
  if (binding.modifiers.click) t.push('click')
  if (!t.length) t.push('hover')

  $(el).tooltip({
    title: binding.value,
    placement: binding.arg || 'top',
    trigger: t.join(' '),
    html: !!binding.modifiers.html,
  });
}

Vue.directive('tooltip', {
  bind: bsTooltip,
  update: bsTooltip,
  unbind (el) {
    $(el).tooltip('dispose')
  }
});

pour L'utiliser avec Nuxt.js vous pouvez créer un plugin:

mettez le code ci-dessus dans un fichier, par exemple /plugins/bs-tooltips.js et l'enregistrer dans votre nuxt.config.js.

plugins: [
    '~/plugins/bs-tooltips.js'
],

Maintenant cela fonctionne:

<button v-tooltip="'Tooltip text'">Hover me</button>
<button v-tooltip.click="Tooltip text">Click me</button>
<button v-tooltip.html="Tooltip text">Html</button>
<button v-tooltip:bottom="Tooltip text">Bottom</button>
<button v-tooltip:auto="Tooltip text">Auto</button>

Vous devriez utiliser cette syntaxe, mettez-la sur index.html ou sur votre fichier js

$(function () {
  $('body').tooltip({
      selector: '[data-toggle="tooltip"]'
  });
});