laravel 如何在 Vue.js 中添加引导工具提示

How can add bootstrap tooltip inside Vue.js

提问by Sarath TS

I have a page for listing data from table using Vue.js and Laravel. Listing data is successful. Delete and edit function is going on. For that purpose I have added two <span> (glyphicon-pencil), <span> (glyphicon-trash). If both <span>are outside the <template>tooltip shows, otherwise it doesn't works. Do you know how bootstrap tooltip works inside Vue Js. Thanks.

我有一个页面，用于使用 Vue.js 和 Laravel 列出表中的数据。列出数据成功。删除和编辑功能正在进行中。为此，我添加了两个<span> (glyphicon-pencil), <span> (glyphicon-trash). 如果两者<span>都在<template>工具提示显示之外，否则它不起作用。你知道引导工具提示在 Vue Js 中是如何工作的吗？谢谢。

page.blade.php

页面.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

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

采纳答案by Jeff

You need to run $('[data-toggle="tooltip"]').tooltip()AFTER the data loads from the server. To ensure the DOM is updated, you can use the nextTickfunction:

您需要在$('[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

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

Edit: a more complete and robust solution has been posted by Vitim.us below

编辑：下面的 Vitim.us 发布了一个更完整和强大的解决方案

回答by Ikbel

You can use this directive:

您可以使用此指令：

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

For example:

例如：

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

Or you can also bind the tooltip text to a computed variable:

或者您也可以将工具提示文本绑定到计算变量：

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

And in your component script:

在您的组件脚本中：

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

回答by Vitim.us

The right way to this, is making it a directive, so you can hook on the life cycle of a DOM element.

正确的方法是将其设为指令，以便您可以挂钩 DOM 元素的生命周期。

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

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

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

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>

回答by SHAIK ALAUDDEEN Alihasana

A easyway to use bootstrap tooltip in vuejs

在 vuejs 中使用引导工具提示的简单方法

Install boostrap, jquery and popper.js

安装 boostrap、jquery 和 popper.js

for jquery, bootstrap and popper.js add below code in main.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"]'
  })
})

if you use eslint in vuejs, please dont forgot to add below code in .eslintrc.js file

如果您在 vuejs 中使用 eslint，请不要忘记在 .eslintrc.js 文件中添加以下代码

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

And dont forgot to Re-Compile the vuejs

并且不要忘记重新编译vuejs

回答by Markus Kottl?nder

I tried to use the solution posted by Vitim.us but I ran into some issues (unexpected/unset values). Here's my fixed and shortened version:

我尝试使用 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')
  }
});

To use it with Nuxt.js you can create a plugin:

要将它与 Nuxt.js 一起使用，您可以创建一个插件：

Put the above code in a file, e.g. /plugins/bs-tooltips.jsand register it in your nuxt.config.js.

将上面的代码放在一个文件中，例如/plugins/bs-tooltips.js并将其注册到您的nuxt.config.js.

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

Now this works:

现在这有效：

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

回答by veritas

You will find all the CDNs here without requirement of any registration of directive. Libray was made by Guillaume Chau

您可以在此处找到所有 CDN，无需任何指令注册。Libray 由Guillaume Chau 制作

body {
  font-family: sans-serif;
  margin: 42px;
}

.tooltip {
  display: block !important;
  z-index: 10000;
}

.tooltip .tooltip-inner {
  background: black;
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
}

.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: black;
}

.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}

.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}

.tooltip[x-placement^="bottom"] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.tooltip[x-placement^="right"] {
  margin-left: 5px;
}

.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip[x-placement^="left"] {
  margin-right: 5px;
}

.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.tooltip[aria-hidden='true'] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.tooltip[aria-hidden='false'] {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}

<script src="https://unpkg.com/popper.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <p><input v-model="message" placeholder="Message" /></p>
  <p><span v-tooltip="message">{{ message }}</span></p>
</div>

new Vue({
  el: '#app',
   data: {
    message: 'Hello Vue.js!'
  }
})

If the tooltip does not show on your page, most probably it is conflicting with some other library or the order of placing the CDNs on the page is not proper. In case your tooltip is being cut off on Chrome (will work in FireFox) due to conflict with bootstrap library, add max-width:100% to tooltip-inner to the v-tooltip style

如果工具提示没有显示在您的页面上，很可能是与其他一些库冲突，或者在页面上放置 CDN 的顺序不正确。如果您的工具提示在 Chrome 上被切断（将在 FireFox 中工作）由于与引导库冲突，请将 max-width:100% 添加到 tooltip-inner 到 v-tooltip 样式

.tooltip .tooltip-inner {
  **max-width:100%;**
  background: black;
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
}

回答by seagulledge

If using Typescript Vue class components, install the jquery types:

如果使用 Typescript Vue 类组件，请安装 jquery 类型：

npm install --save @types/jquery

And declare the directive like this in your Vue file, outside your component:

并在组件外部的 Vue 文件中声明如下指令：

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

Then use the sample HTML/bindings from @Ikbel's answer.

然后使用@Ikbel 回答中的示例 HTML/绑定。

回答by Yul94

You should use this syntax, put it on index.html or on your general js file

你应该使用这个语法，把它放在 index.html 或你的通用 js 文件上

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