Wie kann man add bootstrap tooltip im Vue Js

Habe ich eine Seite für die Auflistung der Daten aus Tabelle mit VueJs und Laravel. Auflistung der Daten erfolgreich ist. Löschen und Bearbeiten-Funktion auf. Für diesen Zweck habe ich zwei <span> (glyphicon-pencil), <span> (glyphicon-trash). Wenn beide <span> sind außerhalb der <template>tooltip zeigt an, sonst funktioniert das nicht. Wissen Sie, wie bootstrap tooltip funktioniert innerhalb Vue Js. Danke.

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'
});

vue-strap mit tooltips
Also ohne vue Armband das nicht möglich?
natürlich, das ist möglich. ich habe meinen einfach Sie können entweder vue-Gurt oder den Quellcode anschauen, um zu sehen, wie es selbst zu tun

InformationsquelleAutor sam sam | 2016-05-06

11

Müssen Sie führen $('[data-toggle="tooltip"]').tooltip() NACH dem laden von Daten vom server. Um sicherzustellen das DOM aktualisiert wird, können Sie die nextTick Funktion:
```
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: eine vollständige und robuste Lösung wurde gepostet von witim.uns unten

Super.. ich Danke Euch so sehr.
Dies ist nicht der richtige Weg, es zu tun für ein paar Gründe, dieser kann brechen, wenn der DOM reagiert und neu Rendern ein Teil Ihrer Sicht. Sie sind nicht zu zerstören tooltips nach der Initialisierung. Dies kann brechen, denn nextTick ist async, und etwas zwischen render und nextTick können ändern Sie Ihr DOM Stand.

InformationsquelleAutor Jeff

Können Sie diese Direktive verwenden:

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

Beispiel:

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

Oder Sie können auch binden Sie den QuickInfo-text an eine berechnete variable:

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

Und in der Komponente Skript:

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

Dies sollte die akzeptierte Antwort. Reine bootstrap & Direkt auf den Punkt. Gehen Sie nicht mit externen Bibliotheken
wie soll man das zerstören der tooltip $(el).tooltip('destroy') ?
Bei Verwendung von Typoskript, werden Sie sicher, dass Sie npm-Paket @ - Typen/jquery
Dieses apt und eine große Lösung, wie mit einer adapter-Muster.

InformationsquelleAutor Ikbel

1

Bootstrap-Vue unterstützt tooltips direkt über die folgende syntax dokumentiert hier.
```
<b-tooltip content="Tooltip Text">
    <b-btn variant="outline-success">Live chat</b-btn>
</b-tooltip>
```
Installation von Bootstrap-Vue ist schnell und schmerzlos. Sehen die quick-setup-guide für mehr details.

InformationsquelleAutor Chris K

Einem easyway-die Verwendung von bootstrap tooltip in vuejs

Installieren boostrap, jquery und popper.js

jquery, bootstrap und popper.js fügen Sie folgenden code in 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"]'
  })
})

wenn Sie eslint in vuejs, bitte nicht vergessen, fügen Sie folgenden code in .eslintrc.js Datei

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

Und dont vergessen, zu Re-Kompilieren, die vuejs

InformationsquelleAutor SHAIK ALAUDDEEN Alihasana

Wenn mit Typoskript Vue-class-Komponenten, installieren Sie die jquery-Typen:

npm install --save @types/jquery

Und deklarieren Sie die Richtlinie in Ihrem Vue-Datei, die außerhalb Ihrer Komponente:

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

Dann verwenden Sie die Beispiel-HTML/Bindungen von @Ikbel Antwort.

InformationsquelleAutor seagulledge

0

Sollten Sie diese syntax verwenden, legen Sie es auf index.html oder auf Ihre Allgemeinen js-Datei
```
$(function () {
  $('body').tooltip({
      selector: '[data-toggle="tooltip"]'
  });
});
```
Nein, das gemacht werden sollte, Vue Weise. Sie sind unter der Annahme, dass die Elemente auf der Seite nicht ändern.
Haben Sie es ausprobiert ? Auch Nach ajax oder dom-update wird es OK sein. Denn jquery-Selektor ist der Körper.

InformationsquelleAutor Yul94

Ich habe die Lösung geschrieben von witim.uns, aber ich lief in einige Probleme (unerwartete/unset-Werte). Hier ist meine Feste und gekürzte version:

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')
  }
});

Verwenden Sie es mit Nuxt.js Sie können erstellen Sie ein plugin:

Setzen Sie den obigen code in einer Datei, z.B. /plugins/bs-tooltips.js und registrieren Sie es in Ihrem nuxt.config.js.

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

Nun das funktioniert:

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

InformationsquelleAutor Markus Kottländer

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.