How to show custom tooltip message in Vue?-CodePudding

I'm encountering an 'undefined' message after binding 'tooltip' prop in '' element. I want simply to show tooltip messages on required input fields.

full code: https://jsfiddle.net/8gaysr9u/

in line 16th appending v-bind:tooltip="tooltip" at

<label>SKU<input type="text" id="sku" v-model="this.product.sku" placeholder="ID"></label><tooltips v-bind:tooltip="tooltip"/>

and in line 122th appending v-bind:tooltip="tooltip">{{tooltip.tooltipText.onSubmit}}

<div class="tooltip">
  <span class="tooltiptext" v-bind:tooltip="tooltip">{{tooltip.tooltipText.onSubmit}}</span>
</div>

the console simply thows 'undefined'. I variated the code in all ways but like against the brick wall the console throws 'undefined'. What I am doing wrong here??

CodePudding user response：

False alarm! :D Solved by myself. :)

I added to my custom tooltip element: :tooltip="this.tooltipText"

<tooltips :tooltip="this.tooltipText" />

and in custom component 'tootips': v-bind:tooltip="tooltip">{{tooltip.onSubmit}}

<span class="tooltiptext" v-bind:tooltip="tooltip">{{tooltip.onSubmit}}</span>

Now my tooltip shows as expected :))