I'm trying to get a tooltip to show when hovering a cell when the characters inside the cell are more than 12 characters.
<template v-slot:reservationNameTemplate="{ props }">
<td :style="truncateDescriptionText(props.dataItem)">
{{ props.dataItem[props.field] }}
</td>
</template>
This is working fine to truncate the text inside the cell, however when I try to warp it with the Tooltip like this the truncate stops working and I get no tooltip on hover
<template v-slot:reservationNameTemplate="{ props }">
<Tooltip :anchor-element="'target'" :position="'bottom'">
<td>
{{ props.dataItem[props.field] }}
</td>
</Tooltip>
<td :style="truncateDescriptionText(props.dataItem)">
{{ props.dataItem[props.field] }}
</td>
</template>
Thank you.