Tooltip in Vue Kanban component

11 Jun 202417 minutes to read

The tooltip is used to show the card information when the cursor hover over the card elements using the enableTooltip property. Tooltip content is dynamically set based on hovering over the card elements.

If you wish to show tooltip on Kanban board custom elements, you need to add e-tooltip-text class name of a particular element.

Tooltip template

You can customize the tooltip content with any HTML or CSS element and styling using the tooltipTemplate property. In the following demo, the tooltip is customized with HTML elements.

<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings" :enableTooltip='true' :tooltipTemplate="tooltipTemplate">
          <e-columns>
            <e-column headerText="To Do" keyField="Open"></e-column>
            <e-column headerText="In Progress" keyField="InProgress"></e-column>
             <e-column headerText="Testing" keyField="Testing"></e-column>
            <e-column headerText="Done" keyField="Close"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script setup>

import { KanbanComponent as EjsKanban, ColumnsDirective as EColumns, ColumnDirective as EColumn } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
import {createApp} from 'vue';

const app = createApp({});

var ToolTipTemplate = app.component('tooltipTemplate', {
  data: () => ({}),
  template: `<div class='e-kanbanTooltipTemp'>
                <table>
                    <tr>
                        <td class="details">
                            <table>
                                <colgroup>
                                    <col style="width:30%">
                                    <col style="width:70%">
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <td class="CardHeader">Assignee:</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="CardHeader
                                        ">Type:</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="CardHeader
                                        ">Estimate:</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="CardHeader
                                        ">Summary:</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>`
});

kanbanData = extend([], kanbanData, null, true);
const cardSettings = {
  contentField: "Summary",
  headerField: "Id",
};
const tooltipTemplate = () => {
    return {
        template: ToolTipTemplate
    };
};

</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';

.e-kanbanTooltipTemp {
    width: 250px;
    padding: 3px;
}

.e-kanbanTooltipTemp>table {
    width: 100%;
}

.e-kanbanTooltipTemp td {
    vertical-align: top;
}
</style>
<template>
  <div id="app">
       <ejs-kanban id="kanban" keyField="Status" :dataSource="kanbanData"
        :cardSettings="cardSettings" :enableTooltip='true' :tooltipTemplate="tooltipTemplate">
          <e-columns>
            <e-column headerText="To Do" keyField="Open"></e-column>
            <e-column headerText="In Progress" keyField="InProgress"></e-column>
             <e-column headerText="Testing" keyField="Testing"></e-column>
            <e-column headerText="Done" keyField="Close"></e-column>
          </e-columns>
        </ejs-kanban>
  </div>
</template>

<script>

import { KanbanComponent, ColumnDirective, ColumnsDirective } from '@syncfusion/ej2-vue-kanban';
import { extend } from '@syncfusion/ej2-base';
import { kanbanData } from './datasource.js';
import {createApp} from 'vue';

const app = createApp({});

var ToolTipTemplate = app.component('tooltipTemplate', {
  data: () => ({}),
  template: `<div class='e-kanbanTooltipTemp'>
                <table>
                    <tr>
                        <td class="details">
                            <table>
                                <colgroup>
                                    <col style="width:30%">
                                    <col style="width:70%">
                                </colgroup>
                                <tbody>
                                    <tr>
                                        <td class="CardHeader">Assignee:</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="CardHeader
                                        ">Type:</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="CardHeader
                                        ">Estimate:</td>
                                        <td></td>
                                    </tr>
                                    <tr>
                                        <td class="CardHeader
                                        ">Summary:</td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </table>
            </div>`
});


export default {
name: "App",
components: {
"ejs-kanban":KanbanComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
  data: function() {
    return {
      kanbanData: extend([], kanbanData, null, true),
      cardSettings: {
        contentField: "Summary",
        headerField: "Id",
      },
      tooltipTemplate: function () {
        return {
          template: ToolTipTemplate
        }
      },
    };
  },
}
</script>
<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-layouts/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-vue-kanban/styles/material.css';

.e-kanbanTooltipTemp {
    width: 250px;
    padding: 3px;
}

.e-kanbanTooltipTemp>table {
    width: 100%;
}

.e-kanbanTooltipTemp td {
    vertical-align: top;
}
</style>