[Vuejs]-Vue.JS – Is there a way to fire my tooltip component via a method

0πŸ‘

βœ…

I fixed it. With an anchor tag I can call a method which hides and shows the component. The component is basically a div which is in the main component. See an example here :

method call :

<a href="#" 
   class="tooltipTriggerMarkup"
   @click="fireTooltip('t2',
                       'Dit is de 2e tooltip',
                       'body body body')">commodo</a> 

the method :

fireTooltip(reference,title,body) {
            this.showToolTip=!this.showToolTip;
            this.tooltipTitle = title;
            this.tooltipBody = body;
            this.reference = reference;
        }

https://jsfiddle.net/AmmarAon/9gLerv0b/173/

because of the method the tooltip can be loaded with dynamic content. It also places the tooltip beneath the anchor tag and checks if the tooltip doesn’t fall out of bounds of the window.

Leave a comment