How to add a tooltip to cells in a Syncfusion Grid on Vue 3 based on value in the cell?

Question

I need to add some extra info (contained in the datasource) as a tooltip above each cell in a GridComponent from syncfusion.

So far I have this - though it seems this is for Vue 2...

 <ejs-tooltip ref="tooltip" target=".e-rowcell" :beforeRender="beforeRender">
      <ejs-grid ref="grid" :dataSource="data" height="315px">
        <e-columns>
          <e-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-column>
          <e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
          <e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column>
          <e-column field="ShipName" headerText="Ship Name" width="120"></e-column>
        </e-columns>
      </ejs-grid>
    </ejs-tooltip>

and then the beforeRender method:

  beforeRender: function (args) {
        if (args.target.closest("td")) {
           this.$refs.tooltip.content = args.target.innerText;
        }
      }

This doesn't work (that $refs is a vue 2 thing right?)...

So if I add the vue3 reference to the tooltip: const tooltip = ref<TooltipComponent>(null); I am unable to do that tooltip.value.content or tooltip.content - it tells me content does not exist...

I tried making the :content property point to a method but that didn't work either.

I suspect there is some better way to do this in vue 3...

Answer 1

You can get the Tooltip component reference as shown in the below code snippet in Vue 3.

  beforeRender: function (args) {
    if (args.target.closest("td")) {
      this.$refs.tooltip.ej2Instances.content = args.target.innerText;
    }
  },

Reference sample: https://codesandbox.io/s/vue-3-tooltip-37v1q?file=/src/App.vue