Как добавить всплывающую подсказку в Vue.js

Ответ 1

Вам нужно запустить $('[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 ниже

Ответ 2

Вы можете использовать эту директиву:

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

Ответ 3

Правильный путь к этому - сделать это директивой, чтобы вы могли подключиться к жизненному циклу элемента 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>

Ответ 4

Легко использовать всплывающую подсказку в 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"]'
  })
})

если вы используете eslint в vuejs, пожалуйста, не забудьте добавить ниже код в файл.eslintrc.js

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

И не забыл перекомпилировать vuejs

Ответ 5

Я попытался использовать решение, отправленное 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>

Ответ 6

Bootstrap Вьет поддерживает всплывающие подсказки непосредственно с помощью следующего синтаксиса документированного здесь.

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

Установка Bootstrap Vue является быстрой и безболезненной. Подробнее см. В руководстве по быстрой настройке.

Ответ 7

Вы должны использовать этот синтаксис, поместить его в index.html или в свой общий файл js

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

Ответ 8

Если вы используете компоненты класса Stylecript 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'             
    })
});

Затем используйте образец HTML/привязки из ответа @Ikbel.