Vue render element with directive

Question

I'm trying to render this directive using Render Function

<h2 v-tooltip.top="{ content: 'You have new messages.', classes: 'tooltip-info', offset: 15 }">
            some text
</h2>

Using this code inside function

return createElement('h2', {
                    directives: [
                        {
                            name: 'v-tooltip',
                            value: {
                                content: field.tooltip.content ? field.tooltip.content : field.tooltip,
                                classes: field.tooltip.class ? field.tooltip.class : 'tooltip-info',
                                offset: 15,
                            },
                            arg: 'top',
                        },
                    ],
                }, [field.title]);

but i get this error: [Vue warn]: Failed to resolve directive: v-tooltip

Am i missing something, field is object which might have content or class prop. So i set them if it has or go to default in the else.

v-tooltip is this directive https://github.com/Akryum/v-tooltip

name should be just tooltip if I am not mistaken

samayo
– samayo

2017-11-07 13:51:17 +00:00
Commented Nov 7, 2017 at 13:51 — samayo
– samayo, Commented Nov 7, 2017 at 13:51
jesus thank you! answer it so i can accept the answer

Georgi Antonov
– Georgi Antonov

2017-11-07 14:04:09 +00:00
Commented Nov 7, 2017 at 14:04 — Georgi Antonov
– Georgi Antonov, Commented Nov 7, 2017 at 14:04

tony19 · Accepted Answer · 2022-07-15 20:38:41Z

7

As I mentioned in the comments, v-tooltip should be changed to tooltip.

When defining a directive in vuejs, the name does not need the v- prefix: example:

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

the above directive can be then called as:

<input v-focus>

_source

edited Jul 15, 2022 at 20:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 7, 2017 at 14:08

samayo

16.5k13 gold badges95 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bruno Francisco Over a year ago

How can we pass the options? Such as v-tooltip.bottom to place the tooltip on the bottom

Rafal Olszewski Over a year ago

@null Args should be used as v-my-directive:foo and accessed via second param of inserted, as follows: inserted: function (el, binding) { console.log(binding.arg) }

Collectives™ on Stack Overflow

Vue render element with directive

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related