javascript - How to conditionally display a tooltip in Vue.js? - Stack Overflow

admin管理员组

文章数量:1287849

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

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

• javascript
• html
• vue.js
• v-tooltip

Share Improve this question Follow edited Aug 22, 2019 at 21:46 tony19 139k2323 gold badges277277 silver badges347347 bronze badges asked Aug 22, 2019 at 20:29 LDBLDB 61144 gold badges1414 silver badges3131 bronze badges 2

• 1 which library are you using ? or you're creating that directive by yourself? – Boussadjra Brahim Commented Aug 22, 2019 at 20:33
• Yea its v-tooltip... – LDB Commented Aug 22, 2019 at 20:38

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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',
}">

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

本文标签： javascriptHow to conditionally display a tooltip in VuejsStack Overflow