2

Currently I am using Vue/Nuxt.js and I am trying to initiate a Bootstrap tooltip using java script. I am aware it can be initialized using jquery but I need it to be initialized using javascript.

Here is my code for the tooltip:

<span class="badge badge-pill badge-primary position-absolute property-tooltip d-none d-md-block py-1 rounded-circle" data-toggle="tooltip" data-placement="right" v-bind:title="content.tooltipText" id="property-tooltip">?</span>

In my Nuxt.Js layout I have a mounted function which is where I am trying to initialize the tooltip.

Here is my code for the layout: 

mounted: function() {
// find an element initialized with Tooltip
let myLinkWithTooltip = document.querySelector(".property-tooltip");

// reference the initialization object
myLinkWithTooltip.tooltip;
}

I have tried using the querySelector, getElementById and getElementByClass, but none of them seem to initialize the tooltip.

UPDATE:

I have got the first part working, so the query selector is finding the element, but it still needs to be initialized.

Xerxes Bamji
  • 21
  • 3
  • I don't think you can, Bootstrap 4.x tooltips are a jQuery plugin. – Luke Ramsden Sep 26 '18 at 09:33
  • It's bad idea to mix like this. Use at least bootstrap vue – Aldarund Sep 26 '18 at 09:45
  • @LukeRamsden, I have got the query selector to find the element, but do you know why the .tooltip isnt working? – Xerxes Bamji Sep 26 '18 at 09:49
  • Because .tooltip() is a jQuery plugin, so just finding the element isn't enough. – Luke Ramsden Sep 26 '18 at 09:50
  • 2
    It's not a good idea to use jQuery or manipulate DOM by yourself in Vue, because Vue can't detect your changes and it will simply overwrite them with it's own virtual DOM on next update tick. If you want to use Bootstrap for anything other than it's CSS then use Vue's Bootstrap implementation: https://bootstrap-vue.js.org/docs/directives/tooltip – dziraf Sep 26 '18 at 09:58

2 Answers2

1

I have created a plugins named bootstrap.js 

window.$ = window.jQuery = require('jquery');
require('bootstrap')

then load the plugin in nuxt.config.js and from anywhere you can use $ or window.$

call $('[data-toggle="tooltip"]').tooltip(); where you need

Pranta Saha
  • 711
  • 1
  • 8
  • 12
-1

You should add show class when you want to show tool tip. Even jQuery add/remove css class dynamically to the div element.

Tomas
  • 3,269
  • 3
  • 29
  • 48
user10418567
  • 1