You can achieve this behavior by using ej2-tooltip component. When the mouse hover on the DropDownList
option that tooltip display some details related to hovered list item.
import { Tooltip } from '@syncfusion/ej2-popups';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component {
constructor(props) {
super(props);
// define the JSON of data
this.countryData = [
{ id: '1', text: 'Australia', content: 'National sports is Cricket' },
{ id: '2', text: 'Bhutan', content: 'National sports is Archery' },
{ id: '3', text: 'China', content: 'National sports is Table Tennis' },
{ id: '4', text: 'Cuba', content: 'National sports is Baseball' },
{ id: '5', text: 'India', content: 'National sports is Hockey' },
{ id: '6', text: 'Spain', content: 'National sports is Football' },
{ id: '7', text: 'United States', content: 'National sports is Baseball' }
];
// maps the appropriate column to fields property
this.fields = { text: 'text', value: 'id' };
this.onBeforeRender = this.onBeforeRender.bind(this);
this.onClose = this.onClose.bind(this);
}
onBeforeRender(args) {
// get the target element
const result = this.dropDownListObject.dataSource;
let i;
for (i = 0; i < result.length; i++) {
if (result[i].text === args.target.textContent) {
this.tooltip.content = result[i].content;
this.tooltip.dataBind();
break;
}
}
}
onClose() {
this.tooltip.close();
}
componentDidMount() {
this.tooltip = new Tooltip({
beforeRender: this.onBeforeRender,
content: 'Loading...',
position: 'TopCenter',
target: '.e-list-item'
});
this.tooltip.appendTo('body');
}
render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObject = scope; }} dataSource={this.countryData} fields={this.fields} placeholder="Select a country" close={this.onClose}/>);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React DropDownList</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.58/ej2-react-dropdowns/styles/material.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>
</head>
<body>
<div id='sample' style="margin: 20px auto 0; width:250px;">
<div id='loader'>Loading....</div>
</div>
</body>
</html>import { Tooltip } from '@syncfusion/ej2-popups';
import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
export default class App extends React.Component<{}, {}> {
// define the JSON of data
private countryData: { [key: string]: Object }[] = [
{ id: '1', text: 'Australia', content: 'National sports is Cricket' },
{ id: '2', text: 'Bhutan', content: 'National sports is Archery' },
{ id: '3', text: 'China', content: 'National sports is Table Tennis' },
{ id: '4', text: 'Cuba', content: 'National sports is Baseball' },
{ id: '5', text: 'India', content: 'National sports is Hockey' },
{ id: '6', text: 'Spain', content: 'National sports is Football' },
{ id: '7', text: 'United States', content: 'National sports is Baseball' }
];
// maps the appropriate column to fields property
private fields: object = { text: 'text', value: 'id' };
private tooltip: any;
private dropDownListObject: any;
constructor(props: any) {
super(props);
this.onBeforeRender = this.onBeforeRender.bind(this);
this.onClose = this.onClose.bind(this);
}
public onBeforeRender(args: any) {
// get the target element
const result = this.dropDownListObject.dataSource;
let i;
for (i = 0; i < result.length; i++) {
if (result[i].text === args.target.textContent) {
this.tooltip.content = result[i].content;
this.tooltip.dataBind();
break;
}
}
}
public onClose() {
this.tooltip.close();
}
public componentDidMount() {
this.tooltip = new Tooltip({
beforeRender: this.onBeforeRender,
content: 'Loading...',
position: 'TopCenter',
target: '.e-list-item'
});
this.tooltip.appendTo('body');
}
public render() {
return (
// specifies the tag for render the DropDownList component
<DropDownListComponent id="ddlelement" ref={(scope) => { this.dropDownListObject = scope; }} dataSource={this.countryData} fields={this.fields} placeholder="Select a country" close={this.onClose} />
);
}
}
ReactDOM.render(<App />, document.getElementById('sample'));