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)">
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', }">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.