Set tooltip for tree nodes in React TreeView component

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);

export default class App extends React.Component<{}, {}> {

   // Data source for TreeView component
   private hierarchicalData: { [key: string]: Object }[] = [
         { id: '01', name: 'Local Disk (C:)', expanded: true, tooltip: 'Local Disk (C:)',
        subChild: [
            {
                id: '01-01', name: 'Program Files', tooltip: 'Program Files',
                subChild: [
                    { id: '01-01-01', name: 'Windows NT', tooltip: 'Windows NT' },
                    { id: '01-01-02', name: 'Windows Mail' , tooltip: 'Windows Mail' },
                    { id: '01-01-03', name: 'Windows Photo Viewer', tooltip: 'Windows Photo Viewer' },
                ]
            },
            {
                id: '01-02', name: 'Users', expanded: true, tooltip: 'Users',
                subChild: [
                    { id: '01-02-01', name: 'Smith' , tooltip:'Smith'},
                    { id: '01-02-02', name: 'Public', tooltip: 'Public' },
                    { id: '01-02-03', name: 'Admin', tooltip: 'Admin' },
                ]
            },
            {
                id: '01-03', name: 'Windows', tooltip: 'Windows',
                subChild: [
                    { id: '01-03-01', name: 'Boot', tooltip:'Boot' },
                    { id: '01-03-02', name: 'FileManager', tooltip: 'FileManager' },
                    { id: '01-03-03', name: 'System32', tooltip:'System32' },
                ]
            },
        ]
    },
    {
        id: '02', name: 'Local Disk (D:)', tooltip: 'Local Disk (D:)',
        subChild: [
            {
                id: '02-01', name: 'Personals',tooltip: 'Personals',
                subChild: [
                    { id: '02-01-01', name: 'My photo.png', tooltip: 'My photo.png' },
                    { id: '02-01-02', name: 'Rental document.docx', tooltip: 'Rental document.docx' },
                    { id: '02-01-03', name: 'Pay slip.pdf', tooltip:'Pay slip.pdf' },
                ]
            },
            {
                id: '02-02', name: 'Projects',tooltip: 'Projects',
                subChild: [
                    { id: '02-02-01', name: 'ASP Application', tooltip: 'ASP Application' },
                    { id: '02-02-02', name: 'TypeScript Application', tooltip: 'TypeScript Application' },
                    { id: '02-02-03', name: 'React Application' , tooltip: 'React Application'},
                ]
            },
            {
                id: '02-03', name: 'Office', tooltip: 'Office',
                subChild: [
                    { id: '02-03-01', name: 'Work details.docx' , tooltip:'Work details.docx' },
                    { id: '02-03-02', name: 'Weekly report.docx', tooltip: 'Weekly report.docx' },
                    { id: '02-03-03', name: 'Wish list.csv', tooltip: 'Wish list.csv' },
                ]
            },
        ]
    },
    {
        id: '03', name: 'Local Disk (E:)', tooltip: 'Local Disk (E:)',
        subChild: [
            {
                id: '03-01', name: 'Pictures', tooltip: 'Pictures',
                subChild: [
                    { id: '03-01-01', name: 'Wind.jpg', tooltip: 'Wind.jpg' },
                    { id: '03-01-02', name: 'Stone.jpg', tooltip: 'Stone.jpg'  },
                    { id: '03-01-03', name: 'Home.jpg', tooltip: 'Home.jpg'  },
                ]
            },
            {
                id: '03-02', name: 'Documents', tooltip: 'Documents',
                    subChild: [
                    { id: '03-02-01', name: 'Environment Pollution.docx' , tooltip: 'Environment Pollution.docx' },
                    { id: '03-02-02', name: 'Global Warming.ppt', tooltip: 'Global Warming.ppt'  },
                    { id: '03-02-03', name: 'Social Network.pdf', tooltip: 'Social Network.pdf'  },
                ]
            },
            {
                id: '03-03', name: 'Study Materials', tooltip: 'Study Materials',
                subChild: [
                    { id: '03-03-01', name: 'UI-Guide.pdf' , tooltip: 'UI-Guide.pdf' },
                    { id: '03-03-02', name: 'Tutorials.zip', tooltip: 'Tutorials.zip'  },
                    { id: '03-03-03', name: 'TypeScript.7z' , tooltip: 'TypeScript.7z' },
                ]
            },
        ]
    }
    ];
    private field:Object ={  dataSource: this.hierarchicalData, id: 'id', text: 'name', child: 'subChild' };

    render() {
    return (
      <div className = 'control-pane'>
        <div className='control-section'>
        <div className='control_wrapper'>
            {/* Render TreeView */}
            <TreeViewComponent fields={this.field} />
        </div>
        </div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById('sample'));

#loader {
    color: #008cff;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}