How to conditionally display a tooltip in Vue.js?

Question

I am trying to conditionally display a v-tooltip based on a Boolean. This is what I have currently:

<div v-for="predefinedContentItem in getPredefinedContentCategoryItems(category.id)"
  :class="['category-item-content-wrapper', { 'not-clickable': isMainDialogClosed}]"
  v-tooltip.right="getPredefinedContentItemMessage(predefinedContentItem)"
  slot="content"
  :key="predefinedContentItem.id"
  @click="onPredefinedContentItemClick(predefinedContentItem, category.id)">

I'm not trying to dynamically display different tooltip text. I want to determine whether or not to display the actual tooltip. I've tried the following ternary with no success:

<div v-for="predefinedContentItem in getPredefinedContentCategoryItems(category.id)"
  :class="['category-item-content-wrapper', { 'not-clickable': isMainDialogClosed}]"
  v-tooltip.right="isAutomotive ? getPredefinedContentItemMessage(predefinedContentItem) : null";
  slot="content"
  :key="predefinedContentItem.id"
  @click="onPredefinedContentItemClick(predefinedContentItem, category.id)">

Answer 1

You can pass to v-tooltip an object that takes extra options, and add the show property inside the directive like this:

<div v-tooltip="{
  content: getPredefinedContentItemMessage(predefinedContentItem),
  show: isAutomotive,
  trigger: 'hover',
  placement: 'right',
}">