Place tooltip on specific columns of datagrid in syncfusion

[Bryam Garzón]

Good morning, I want to place tooltips in specific datagrid columns, the problem is that I need tooltips to be inside icons, different information than that which comes in columns, but I really don't know how to do it.

I tried with Vue component but it puts the tooltip below the cell.

      empRisk: function () {

        return {

          template: Vue.component("empRisk", {

            template: `<div align="center">  

                            <div class="tooltip">

                            <button name="button" v-on:click="DataIframe(data)"><span :class="data.Columna[0].VC[0]" :style="data.Columna[0].VC[1]"></span></button>

                            <span class="tooltiptext">{{data.Columna[0].VR[0]}}</span>

                            </div>                                                                                            

                        </div>                        

                        `,

            data: function () {

              return {

                data: {},};

            },

            methods : {

              DataIframe(data) {

                dialog = true

                IdentificacionGlo = data.Columna[2].VC[1]

                NombrePersonaGlo =  data.Columna[2].VR[0]

                Contrato_IDGlo = data.Columna[1].VC[2]

                Acivos_IDGlo  = data.Columna[1].VC[3]

                TipoActivoGlo =  data.Columna[1].VR[5]

              },

            }

          }),

        };

      },

Here an example

I would appreciate anyone who can help me.

[Rajapandi Ravi]

Hi Bryam,

Greetings from Syncfusion support.

You can achieve your requirement of displaying tooltip for Grid columns by rendering the Grid within the EJ2 Tooltip component. We have already logged this requirement in our documentation site, and you can find the link for the same below,

Documentation: https://ej2.syncfusion.com/vue/documentation/grid/columns/columns/#display-custom-tooltip-for-columns

The above documented approach shows tooltip for all the columns. However, the tooltip popup can be prevented from opening for certain columns by cancelling the tooltip open for the required cases. This can be achieved by setting the ‘cancel’ property value of the tooltip’s beforeOpen event arguments as ‘true’ as demonstrated in the below code snippet,

// Tooltip’s beforeOpen event handler

beforeOpen(args) {

    // Current column index is retrieved

    var cellIndex = parseInt(args.target.closest('.e-headercell').getAttribute('aria-colindex'));

    // Column details are retrieved

    var column = this.$refs.gridObj.ej2Instances.getColumnByIndex(cellIndex);

    // Tooltip open is prevented based on column field

    if (column.field == "EmployeeID" || column.field == "Country") {

        // Here tooltip is prevented for the 'EmployeeID' and 'Country' columns

        args.cancel = true;

    }

}

API: https://ej2.syncfusion.com/vue/documentation/api/tooltip#beforeopen

Please get back to us if you require any further assistance.

Regards,

Rajapandi R