Using Tooltip component conditionally inside grid cell

[Vincent]

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.

[Petar]

Hello, Vincent.

Here is a StackBlitz example demonstrating how the functionality that you want to implement can be achieved.

As you can see, in the above project, the Grid and Tooltip are defined like this - the Grid is Wrapped by the Tooltip component. 

<Tooltip :anchor-element="'target'" :position="'top'">
  <Grid
    :style="{ height: '400px' }"
    :data-items="products"
    :resizable="true"
    :columns="columns"
  >
    <template v-slot:myCellTemplate="{ props }">
      <td
        :colspan="props.colSpan"
        :role="props.role"
        :aria-selected="props.isSelected"
        :data-grid-col-index="props['data-grid-col-index']"
        :id="props.id"
      >
        <div class="td-class" :title="props.dataItem[props.field]">
          {{ props.dataItem[props.field] }}
        </div>
      </td>
    </template>
  </Grid>
</Tooltip>

The above, marked in yellow code is important for the suggested implementation as it has two key configurations for the discussed scenario:

1. The td-class class - This class is used to limit the number of displayed symbols using the following definition:
   

   .td-class {
     overflow: hidden;
     max-width: 12ch;
     text-overflow: ellipsis;
     white-space: nowrap;
   }

2. The title that is passed to the div element that wraps each cell's content - We need the title attached to the div element so the Toolbar can properly read it and display the full cell content when a cell is hovered.

I hope the above example and description will help you achieve what you need in your application.