Getting Started

14 Aug 202316 minutes to read

This section briefly explains how to create a simple Tooltip component and configure its available functionalities in React.

Tooltips can be initialized on,

  • A single element (or)
  • A container that has more than one sub-element within it and the sub-elements are considered as targets.

Dependencies

The following list of dependencies are required to use the Tooltip component in your application.

|-- @syncfusion/ej2-react-popups
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-popups
        |-- @syncfusion/ej2-buttons

Installation and configuration

  • You can use Create-react-app to setup the applications.
    To install create-react-app run the following command.

        npm install -g create-react-app

Start a new project using create-react-app command as follows

```bash create-react-app quickstart --scripts-version=react-scripts-ts cd quickstart ```
``` create-react-app quickstart cd quickstart ```

  • Install the below required dependency package in order to use the Tooltip component in your application.

      npm install @syncfusion/ej2-react-popups --save

The above package installs tooltip dependencies which are required to render the Tooltip component in React environment.

  • Tooltip CSS files are available in the ej2-react-popups package folder.
    Import the Tooltip component’s required CSS references as follows in src/App.css.

      @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-react-popups/styles/material.css";

We can also use CRG to generate combined component styles.

Initialize the Tooltip on a single element

Import the Tooltip component to your src/App.tsx file using following code.

import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import './App.css';

function App() {
  let style: object = {
    display: 'inline-block',
    margin: '60px'
  };
  return (
    <TooltipComponent content="Tooltip Content" style={style}>
      Show Tooltip
    </TooltipComponent>
  );
}
import * as React from 'react';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import './App.css';
function App() {
    let style = {
        display: 'inline-block',
        margin: '60px'
    };
    return (<TooltipComponent content="Tooltip Content" style={style}>
      Show Tooltip
    </TooltipComponent>);
}

  • Now, run the application in the browser using the following command.

      npm start

The output will be as follows:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    return (<div id="container">
      <TooltipComponent position="TopCenter" content="Tooltip Content" target="#target">
        <button className="e-btn" id="target" cssClass="tooltipElement">Show Tooltip</button>
      </TooltipComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

function App() {
  return (
    <div id="container">
      <TooltipComponent position="TopCenter" content="Tooltip Content" target="#target">
        <button className="e-btn" id="target" cssClass="tooltipElement">Show Tooltip</button>
      </TooltipComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Tooltip</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="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Initialize Tooltip within a container

You can create Tooltips on multiple targets within a container. To do so, you have to define specific target elements to the target property so that the Tooltip is initialized only on matched targets within a container. In this case, the Tooltip content is assigned from the title attribute of the target element.

Refer to the following code example to create a Tooltip on multiple targets within a container.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
    return (<div id='container'>
      <TooltipComponent id="details" target='.e-info' position='RightCenter'>
        <form id="details" role="form">
            <table>
                <tr>
                    <td className="info">User Name</td>
                    <td>
                        <input type="text" className="e-info" name="firstname" title="Please enter your name"/> </td>
                </tr>
                <tr>
                    <td className="info">Email Address</td>
                    <td>
                        <input type="text" className="e-info" name="email" title="Enter a valid email address"/>
                    </td>
                </tr>
                <tr>
                    <td className="info">Password</td>
                    <td>
                        <input type="password" className="e-info" name="password" title="Be at least 8 characters length"/>
                    </td>
                </tr>
                <tr>
                    <td className="info">Confirm Password</td>
                    <td>
                        <input type="password" className="e-info" name="Cpwd" title="Re-enter your password"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        <ButtonComponent id="sample" className="center" content="Submit"/>
                    </td>
                    <td>
                        <ButtonComponent id="reset" className="center" content="Reset"/>
                    </td>
                </tr>
            </table>
        </form>
      </TooltipComponent>
    </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  return (
    <div id='container'>
      <TooltipComponent id="details" target='.e-info' position='RightCenter'>
        <form id="details" role="form">
            <table>
                <tr>
                    <td className="info">User Name</td>
                    <td>
                        <input type="text" className="e-info" name="firstname" title="Please enter your name" /> </td>
                </tr>
                <tr>
                    <td className="info">Email Address</td>
                    <td>
                        <input type="text" className="e-info" name="email" title="Enter a valid email address" />
                    </td>
                </tr>
                <tr>
                    <td className="info">Password</td>
                    <td>
                        <input type="password" className="e-info" name="password" title="Be at least 8 characters length" />
                    </td>
                </tr>
                <tr>
                    <td className="info">Confirm Password</td>
                    <td>
                        <input type="password" className="e-info" name="Cpwd" title="Re-enter your password" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <ButtonComponent id="sample" className="center" content="Submit"/>
                    </td>
                    <td>
                        <ButtonComponent id="reset" className="center" content="Reset"/>
                    </td>
                </tr>
            </table>
        </form>
      </TooltipComponent>
    </div>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));

In the above sample, details refers to the container’s id, and the target .e-info refers to the target elements available
within that container.

See Also

Positioning Tooltip

Tooltip Open Mode

Customize the Tooltip