web-dev-qa-db-ja.com

Vue.js内にbootstrap tooltipを追加する方法

Vue.jsとLaravelを使用してテーブルのデータを一覧表示するページがあります。データのリストが成功しました。削除および編集機能が進行中です。そのために、2つの<span> (glyphicon-pencil), <span> (glyphicon-trash)を追加しました。両方の<span>が<template>tooltipの表示外にある場合、それ以外の場合は機能しません。 bootstrap= tooltipが内部でどのように機能するかを知っていますかVue Js。ありがとう。

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
26
Sarath TS

サーバーからデータがロードされた後、$('[data-toggle="tooltip"]').tooltip()を実行する必要があります。 DOMが更新されていることを確認するには、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

編集：より完全で堅牢なソリューションが以下のVitim.usによって投稿されました

17
Jeff

次のディレクティブを使用できます。

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

例えば：

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

または、ツールチップテキストを計算された変数にバインドすることもできます。

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

そして、コンポーネントスクリプトで：

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

これに対する正しい方法は、ディレクティブにすることです。そのため、DOM要素のライフサイクルをフックできます。

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

https://Gist.github.com/victornpb/020d393f2f5b866437d13d49a4695b47

/**
 * Enable Bootstrap tooltips using Vue directive
 * @author Vitim.us
 * @see https://Gist.github.com/victornpb/020d393f2f5b866437d13d49a4695b47
 * @example
 *   <button v-tooltip="foo">Hover me</button>
 *   <button v-tooltip.click="bar">Click me</button>
 *   <button v-tooltip.html="baz">Html</button>
 *   <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>
 *   <button v-tooltip:auto.html="clock" @click="clock = Date.now()">Updating</button>
 *   <button v-tooltip:auto.html.live="clock" @click="clock = Date.now()">Updating Live</button>
 */
Vue.directive('tooltip', {
  bind: function bsTooltipCreate(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
    });
  },
  update: function bsTooltipUpdate(el, binding) {
    const $el = $(el);
    $el.attr('title', binding.value).tooltip('fixTitle');

    const data = $el.data('bs.tooltip');
    if (binding.modifiers.live) { // update live without flickering (but it doesn't reposition)
      if (data.$tip) {
        if (data.options.html) data.$tip.find('.tooltip-inner').html(binding.value);
        else data.$tip.find('.tooltip-inner').text(binding.value);
      }
    } else {
      if (data.inState.hover || data.inState.focus || data.inState.click) $el.tooltip('show');
    }
  },
  unbind(el, binding) {
    $(el).tooltip('destroy');
  },
});


//DEMO
new Vue({
  el: '#app',
  data: {
    foo: "Hi",
    bar: "There",
    baz: "<b>Hi</b><br><i>There</i>",
    clock: '00:00',
  },
  mounted() {
    setInterval(() => this.clock = new Date().toLocaleTimeString(), 1000);
  }
});
<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>

  <button v-tooltip:auto.html="clock" @click="clock = 'Long text test <b>bold</b>'+Date.now()">Updating</button>

  <button v-tooltip:auto.html.live="clock" @click="clock = 'Long text test  <b>bold</b>'+Date.now()">Updating Live</button>
</div>
7
Vitim.us

使いやすいbootstrap vuejsのツールチップ

Boostrap、jquery、およびpopper.jsをインストールします

jqueryの場合、bootstrapおよびpopper.jsは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"]'
  })
})

vuejsでeslintを使用する場合、.eslintrc.jsファイルに以下のコードを追加することを忘れないでください

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

そして、vuejsを再コンパイルするのを忘れてはいけません

5
SHAIK ALAUDDEEN Alihasana

Vitim.usが投稿したソリューションを使用しようとしましたが、いくつかの問題（予期しない/値の設定なし）に遭遇しました。修正版および短縮版は次のとおりです。

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

Nuxt.jsで使用するには、プラグインを作成できます。

上記のコードをファイルに入れます、例えば/plugins/bs-tooltips.jsそしてnuxt.config.js。

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

今、これは動作します：

<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>
3
Markus Kottländer

Bootstrap Vue は、文書化されている次の構文を介してツールチップを直接サポートします here 。

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

Bootstrap Vueは迅速かつ簡単です。詳細については クイックセットアップガイド を参照してください。

2
Chris K

この構文を使用して、index.htmlまたは一般的なjsファイルに配置する必要があります

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

TypeScript Vueクラスコンポーネントを使用する場合、jqueryタイプをインストールします。

npm install --save @types/jquery

そして、コンポーネント外のVueファイルで、次のようなディレクティブを宣言します。

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

次に、@ Ikbelの回答からサンプルのHTML /バインディングを使用します。

0
seagulledge