Can't trigger on click, getting [object Object] for content

[xlcrr]

Hi, hope someone can help me please. I can get the hover working, but I can't get this to work using multiple options with an object to enable trigger: 'click'

I am trying to combine v-tooltip with v-clipboard:copy - which could make for a great integration of packages btw. When the user clicks a button, the text on :copy is copied to the keyboard, and the user should get a tooltip.

In my app.js file,

import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard); // this works.

import VTooltip from 'v-tooltip'
Vue.directive('v-tooltip', VTooltip); // default hover works for me but breaks down when I pass an object into v-tooltip instead of =" 'Text' "

// component

<button v-clipboard:copy="item.url"
             v-tooltip="{ content: 'Copied', trigger: 'click' }"
>Copy URL</button>

I am also importing all of the styling in the .vue file where I am implementing this action.

With this approach I get the following error

1. Click does not work
2. Text still shows on hover
3. [object Object] is shown instead of the value of content: 'Copied'

What am I doing wrong? How can an object be passed and triggered on click?

Many thanks.

[albertodeago]

Can you replicate in a jsfiddle or something? I tried in a project of mine but everything works fine

[Akryum]

I cannot reproduce.

[kardeepak77]

Hi, hope someone can help me please. I can get the hover working, but I can't get this to work using multiple options with an object to enable trigger: 'click'

I am trying to combine v-tooltip with v-clipboard:copy - which could make for a great integration of packages btw. When the user clicks a button, the text on :copy is copied to the keyboard, and the user should get a tooltip.

In my app.js file,

import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard); // this works.

import VTooltip from 'v-tooltip'
Vue.directive('v-tooltip', VTooltip); // default hover works for me but breaks down when I pass an object into v-tooltip instead of =" 'Text' "

// component

<button v-clipboard:copy="item.url"
             v-tooltip="{ content: 'Copied', trigger: 'click' }"
>Copy URL</button>

I am also importing all of the styling in the .vue file where I am implementing this action.

With this approach I get the following error

1. Click does not work
2. Text still shows on hover
3. [object Object] is shown instead of the value of content: 'Copied'

What am I doing wrong? How can an object be passed and triggered on click?

Many thanks.

How did you fix it?