web-dev-qa-db-fra.com

Comment ajouter une info-bulle d'amorçage dans Vue.js

J'ai une page pour lister les données de table en utilisant Vue.js et Laravel. Lister les données est réussi. Supprimer et modifier la fonction est en cours. Pour cela, j'ai ajouté deux <span> (glyphicon-pencil), <span> (glyphicon-trash). Si les deux <span> sont en dehors de la <template>tooltip, sinon cela ne fonctionnera pas. Savez-vous comment l'info-bulle d'amorçage fonctionne dans Vue Js. Merci.

page.blade.php 

    <template id="tasks-template">
       <table class="table table-responsive table-bordered table-hover">
            <thead>
                   <tr>
                   <th>#</th>
                   <th>Id</th>
                   <th>Religion</th>
                   <th>Action</th>
                   <th>Created</th>
                   <td>Status</td>
               </tr>
           </thead>

      <tbody>
             <tr v-for="(index, task) in list">
             <td><input type="checkbox" id="checkbox" aria-label="checkbox" value="checkbox"></td>
             <td>@{{ index + 1 }}</td>
            <td>@{{ task.religion | capitalize }}</td>
           <td v-if="task.status == 'publish'">
                     <span class="glyphicon glyphicon-ok"></span>
           </td>
           <td v-else>
                     <span class="glyphicon glyphicon-remove"></span>
           </td>
           <td>@{{ task.created_at }}</td>
           <td>
               <span class="glyphicon glyphicon-pencil" aria-hidden="true" data-toggle="tooltip" data-placement="left" title="Edit"></span> 
               <span class="glyphicon glyphicon-trash" aria-hidden="true" data-toggle="tooltip" data-placement="right" title="Delete"></span>
           </td>
         </tr>
       </tbody>
        </table>
        </template>

        <tasks></tasks> 
@Push('scripts')
    <script src="/js/script.js"></script>
@endpush

scripts.js 

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


Vue.component('tasks', {

    template: '#tasks-template',

    data: function(){
        return{
            list: []
        };
    },

    created: function(){
        this.fetchTaskList();
    },

    methods: {
        fetchTaskList: function(){
            this.$http.get('/backend/religion/data', function(tasks){
                this.$set('list', tasks);
            });
        }
    }

});

new Vue({
   el: 'body'
});
twitter-bootstraplaravelvue.js
19
sam sam

Vous devez exécuter $('[data-toggle="tooltip"]').tooltip() APRES le chargement des données à partir du serveur. Pour vous assurer que le DOM est mis à jour, vous pouvez utiliser la fonction nextTick:

fetchTaskList: function(){
    this.$http.get('/backend/religion/data', function(tasks){
        this.$set('list', tasks);
        Vue.nextTick(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
    });
}

https://vuejs.org/api/#Vue-nextTick

Edit: une solution plus complète et plus robuste a été publiée par Vitim.us ci-dessous

10
Jeff

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

Vous pouvez également lier le texte de l'info-bulle à une variable calculée:

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

Et dans votre script de composant:

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

La bonne façon de procéder consiste à en faire une directive, de sorte que vous puissiez prendre en compte 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/[email protected]/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/[email protected]/dist/js/bootstrap.js"></script>
<script src="https://unpkg.com/[email protected]/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>

5
Vitim.us

J'ai essayé d'utiliser la solution publiée par Vitim.us 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:

Placez le code ci-dessus dans un fichier, par exemple. /plugins/bs-tooltips.js et enregistrez-le 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>
2
Markus Kottländer

Un moyen facile d'utiliser l'info-bulle d'amorçage dans la vuejs

Installer boostrap, jquery et popper.js

pour jquery, bootstrap et popper.js, ajoutez le code ci-dessous dans main.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 dans le fichier .eslintrc.js

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

Et n’oubliez pas de recompiler la vuejs

2
SHAIK ALAUDDEEN Alihasana

Bootstrap Vue supporte les info-bulles 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.

1
Chris K

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

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

Si vous utilisez des composants de classe TypeScript 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 composant:

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

Ensuite, utilisez les exemples HTML/bindings de la réponse de @ Ikbel.

0
seagulledge