JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Tooltip in JavaScript (ES5) Kanban control

31 Mar 2023 / 1 minute 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.

Source
Preview
index.js
index.html
Copied to clipboard
var kanbanObj = new ej.kanban.Kanban({
    dataSource: kanbanData,
    keyField: 'Status',
    columns: [
        { headerText: 'Backlog', keyField: 'Open' },
        { headerText: 'In Progress', keyField: 'InProgress' },
        { headerText: 'Testing', keyField: 'Testing' },
        { headerText: 'Done', keyField: 'Close' }
    ],
    cardSettings: {
        contentField: 'Summary',
        headerField: 'Id'
    },
    enableTooltip: true,
    tooltipTemplate: '#tooltipTemplate'
});
kanbanObj.appendTo('#Kanban');
Copied to clipboard
<!DOCTYPE html><html lang="en"><head>
            
    <title>Kanban Tooltip Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Tooltip template">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-layouts/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-kanban/styles/material.css" rel="stylesheet">
    
    
    <script id="tooltipTemplate" type="text/x-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>${Assignee}</td>
                                </tr>
                                <tr>
                                    <td class="CardHeader">Type:</td>
                                    <td>${Type}</td>
                                </tr>                                
                                <tr>
                                    <td class="CardHeader">Estimate:</td>
                                    <td>${Estimate}</td>
                                </tr>                                
                                <tr>
                                    <td class="CardHeader">Summary:</td>
                                    <td>${Summary}</td>
                                </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </script>
    <style type="text/css">
        .e-kanbanTooltipTemp {
            width: 250px;
            padding: 3px;
        }

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

        .e-kanbanTooltipTemp td {
            vertical-align: top;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/21.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="content-wrapper">
            <div id="Kanban"></div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Previous
Next