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)">

which library are you using ? or you're creating that directive by yourself? — Boussadjra Brahim, Aug 22 '19 at 20:33

score 5 · Answer 1 · edited Aug 22 '19 at 21:51

5

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',
}">

edited Aug 22 '19 at 21:51

tony19

125,647
18
229
307

answered Aug 22 '19 at 20:39

onuriltan

3,730
4
25
37

score 3 · Answer 2 · answered Aug 05 '20 at 20:47

3

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

answered Aug 05 '20 at 20:47

Programmeur

1,483
4
22
32

How to conditionally display a tooltip in Vue.js?

2 Answers2