#vue #javascript

Vue tooltip insertion

 	// under script
   //  simple dumb component called Tooltip has been created that takes props text and className
   import Tooltip from '~/components/Tooltip.vue'
   import Vue from 'vue'

   // under methods....
   insertCopyTooltip: function(row, index){
      // dynamically insert tooltip!
      // if tooltip already inserted, delete it from Vue and from the DOM
      if( !!this.tooltipInstance ){
        console.log(this.tooltipInstance);
        this.tooltipInstance.$destroy();
        this.tooltipInstance.$el.parentNode.removeChild(this.tooltipInstance.$el);
      }
     
     
     // create the vue component ( instantiate the component and add it to the DOM)
      let span = document.createElement("span");
      let container = this.$refs['tooltipContainer'].appendChild(span);
      //Vue extend to create component class (creating a "subclass constructor of Vue")
      let toolTipClass = Vue.extend(Tooltip);
      
      // auth the component, passing it props
      let instance = new toolTipClass({ propsData: { text: "Copied!", className: "tooltip-fade" }});
       
      //mount the component in the DOM
      instance.$mount(container);
      this.tooltipInstance = instance;
    }