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

Answer 1

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