title: How to use modifiers from primevue dynamically
body: <p>I am using Tooltip from Primevue (<a href="https://primefaces.org/primevue/showcase/#/tooltip" rel="nofollow noreferrer">https://primefaces.org/primevue/showcase/#/tooltip</a>) and using it in a storybook file. (<a href="https://storybook.js.org/docs/vue/get-started/introduction" rel="nofollow noreferrer">https://storybook.js.org/docs/vue/get-started/introduction</a>).</p>
  <p>I want to use 'v-tooltip' attribute or modifier like this with directions '.left', which is working fine statically.</p>
  <pre><code>template: &lt;Button type='button'  v-bind='args'  v-tooltip.left='args.tooltipMsg'  /&gt;
  </code></pre>
  <p>but i want to pass the direction dynamically such as 'v-tooltip.right', 'v-tooltip.bottom' etc.</p>
  <p>Here is my complete code:</p>
  <pre><code>import Button from &quot;primevue/button&quot;
  import Tooltip from &quot;primevue/tooltip&quot;
  
  
  export default {
    title: &quot;Components/Tooltip&quot;,
    component: { Button },
    argTypes: {
      label: {
        control: &quot;text&quot;,
      },
      
      tooltipMsg: {
        control: &quot;text&quot;,
      },
      tooltipDirection: {
        options: [&quot;top&quot;, &quot;bottom&quot;, &quot;right&quot;, &quot;left&quot;],
        control: { type: &quot;select&quot; },
      },
    },
  }
  
  const Template = (args) =&gt; ({
    components: { Button },
    setup() {
      
      return { args }
    },
    directives: {
      tooltip: Tooltip,
    },
  
    template:
      &quot;&lt;Button type='button' v-bind='args' v-tooltip='args.tooltipMsg'  /&gt;&quot;,
  })
  export const Primary = Template.bind({})
  Primary.args = {
    label: &quot;Primary&quot;,
    tooltipMsg: &quot;Enter ur name&quot;,
  }
  </code></pre>