Search results

Set Essential JS 2 tooltip to the commands

The tooltipText property of the Toolbar item is used to set the HTML Tooltip to the commands that can be viewed as hint texts on mouse hover.

To change the tooltipText to ej2-tooltip component:

  • Import the Tooltip module from ej2-popups,and initialize the Tooltip with the Toolbar target. Refer to the following code example:
Source
Preview
index.jsx
index.tsx
index.html
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Tooltip } from '@syncfusion/ej2-popups';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
class ReactApp extends React.Component {
    render() {
        return (<div id="Tooltip">
           <ToolbarComponent width="300">
           <ItemsDirective>
              <ItemDirective text="Cut" tooltipText="Cut"/>
              <ItemDirective text="Copy" tooltipText="Copy"/>
              <ItemDirective text="Paste" tooltipText="Paste"/>
              <ItemDirective text="Undo" tooltipText="Undo"/>
              <ItemDirective text="Redo" tooltipText="Redo"/>
           </ItemsDirective>
           </ToolbarComponent></div>);
    }
    componentDidMount() {
        let tooltip = new Tooltip({
            target: '#toolbar [title]',
        });
        tooltip.appendTo('#Tooltip');
    }
}
ReactDOM.render(<ReactApp />, document.getElementById("toolbar"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Tooltip } from '@syncfusion/ej2-popups';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';

class ReactApp extends React.Component<{}, {}> {
  render() {
       return (
           <div id="Tooltip">
           <ToolbarComponent width="300">
           <ItemsDirective>
              <ItemDirective text="Cut" tooltipText="Cut"/>
              <ItemDirective text="Copy" tooltipText="Copy"/>
              <ItemDirective text="Paste" tooltipText="Paste"/>
              <ItemDirective text="Undo" tooltipText="Undo"/>
              <ItemDirective text="Redo" tooltipText="Redo"/>
           </ItemsDirective>
           </ToolbarComponent></div>
       );
  }
  componentDidMount() {
   let tooltip: Tooltip = new Tooltip({
   target: '#toolbar [title]',
   });
   tooltip.appendTo('#Tooltip');
   }
}
ReactDOM.render(<ReactApp/>, document.getElementById("toolbar"));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Toolbar Sample</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/material.css" rel="stylesheet" />
    <link href="https://ej2.syncfusion.com/angular/demos/src/toolbar/toolbar.component.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%;
        }

        .custom_bold .e-tbar-btn-text {
            font-weight: 900;
        }

        .custom_italic .e-tbar-btn-text {
            font-style: italic;
        }

        .custom_underline .e-tbar-btn-text {
            text-decoration: underline red;
        }

        .e-txt-casing .e-tbar-btn-text {
            font-variant: small-caps;
        }

        .e-tbar-btn .e-icons {
            font-family: 'Material_toolbar';
            font-size: 16px;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
        }
    </style>
</head>

<body>
    <div id='toolbar'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>