Tooltip in React Kanban component
27 Jan 202323 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.
[Class-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
template(props) {
return (<div className="e-kanbantooltiptemp">
<table>
<tr>
<td className="e-kanban-card-details">
<table>
<colgroup>
<col style={{ width: "30%" }}/>
<col style={{ width: "70%" }}/>
</colgroup>
<tbody><tr><td className="CardHeader">Assignee:</td><td>{props.Assignee}</td></tr>
<tr><td className="CardHeader">Type:</td><td>{props.Type}</td></tr><tr>
<td className="CardHeader">Estimate:</td><td>{props.Estimate}</td></tr>
<tr><td className="CardHeader">Summary:</td><td>{props.Summary}</td></tr></tbody>
</table>
</td></tr>
</table>
</div>);
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} enableTooltip={true} tooltipTemplate={this.template.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
class App extends React.Component<{}, {}>{
constructor() {
super(...arguments);
this.data = extend([], kanbanData, null, true);
}
private template(props): JSX.Element {
return (<div className="e-kanbantooltiptemp">
<table>
<tr>
<td className="e-kanban-card-details">
<table>
<colgroup>
<col style={{ width: "30%" }} />
<col style={{ width: "70%" }} />
</colgroup>
<tbody><tr><td className="CardHeader">Assignee:</td><td>{props.Assignee}</td></tr>
<tr><td className="CardHeader">Type:</td><td>{props.Type}</td></tr><tr>
<td className="CardHeader">Estimate:</td><td>{props.Estimate}</td></tr>
<tr><td className="CardHeader">Summary:</td><td>{props.Summary}</td></tr></tbody>
</table>
</td></tr>
</table>
</div>);
}
render() {
return <KanbanComponent id="kanban" keyField="Status" dataSource={this.data} cardSettings={{ contentField: "Summary", headerField: "Id" }} enableTooltip={true} tooltipTemplate={this.template.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
}
};
ReactDOM.render(<App />, document.getElementById('kanban'));
<!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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
[Functional-component]
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App() {
let data = extend([], kanbanData, null, true);
function template(props) {
return (<div className="e-kanbantooltiptemp">
<table>
<tr>
<td className="e-kanban-card-details">
<table>
<colgroup>
<col style={{ width: "30%" }}/>
<col style={{ width: "70%" }}/>
</colgroup>
<tbody><tr><td className="CardHeader">Assignee:</td><td>{props.Assignee}</td></tr>
<tr><td className="CardHeader">Type:</td><td>{props.Type}</td></tr><tr>
<td className="CardHeader">Estimate:</td><td>{props.Estimate}</td></tr>
<tr><td className="CardHeader">Summary:</td><td>{props.Summary}</td></tr></tbody>
</table>
</td></tr>
</table>
</div>);
}
return (<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} enableTooltip={true} tooltipTemplate={template.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open"/>
<ColumnDirective headerText="In Progress" keyField="InProgress"/>
<ColumnDirective headerText="Testing" keyField="Testing"/>
<ColumnDirective headerText="Done" keyField="Close"/>
</ColumnsDirective>
</KanbanComponent>);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { extend } from '@syncfusion/ej2-base';
import { KanbanComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-react-kanban";
import { kanbanData } from './datasource';
function App(){
let data = extend([], kanbanData, null, true);
function template(props): JSX.Element {
return (<div className="e-kanbantooltiptemp">
<table>
<tr>
<td className="e-kanban-card-details">
<table>
<colgroup>
<col style={{ width: "30%" }} />
<col style={{ width: "70%" }} />
</colgroup>
<tbody><tr><td className="CardHeader">Assignee:</td><td>{props.Assignee}</td></tr>
<tr><td className="CardHeader">Type:</td><td>{props.Type}</td></tr><tr>
<td className="CardHeader">Estimate:</td><td>{props.Estimate}</td></tr>
<tr><td className="CardHeader">Summary:</td><td>{props.Summary}</td></tr></tbody>
</table>
</td></tr>
</table>
</div>
);
}
return(
<KanbanComponent id="kanban" keyField="Status" dataSource={data} cardSettings={{ contentField: "Summary", headerField: "Id" }} enableTooltip={true} tooltipTemplate={template.bind(this)}>
<ColumnsDirective>
<ColumnDirective headerText="To Do" keyField="Open" />
<ColumnDirective headerText="In Progress" keyField="InProgress" />
<ColumnDirective headerText="Testing" keyField="Testing" />
<ColumnDirective headerText="Done" keyField="Close" />
</ColumnsDirective>
</KanbanComponent>
);
}
ReactDOM.render(<App />, document.getElementById('kanban'));
<!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="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-layouts/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-navigations/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-dropdowns/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-react-kanban/styles/material.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='kanban'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>