javascriptvue.jsfont-awesomev-tooltip

How to pass rendered Vue component as parameter?


I use Vue, vue-fontawesome and v-tooltip. What I simply try to do is this:

<button v-tooltip="<fa icon='sign-out-alt'/>">Upgrade</button>

But that doesn't work, component passed as strings are not rendered. How to get it done easy way?


Solution

  • In this specific use case, there's an example for that in v-tooltip readme

    If you need to display components inside the tooltip (or popover/dropdown, technically it's the same 😄), use the v-popover component

    Here's an example of using a child component as a popover. Instead of my child component, you would use your <fa icon='sign-out-alt'/> icon.