Getting Started

8 May 202521 minutes to read

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

To get start quickly with React Tooltip, you can check on this video:

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

To easily set up a React application, use create-vite-app, which provides a faster development environment, smaller bundle sizes, and optimized builds compared to traditional tools like create-react-app. For detailed steps, refer to the Vite installation instructions. Vite sets up your environment using JavaScript and optimizes your application for production.

Note: To create a React application using create-react-app, refer to this documentation for more details.

To create a new React application, run the following command.

npm create vite@latest my-app

To set-up a React application in TypeScript environment, run the following command.

npm create vite@latest my-app -- --template react-ts
cd my-app
npm run dev

To set-up a React application in JavaScript environment, run the following command.

npm create vite@latest my-app -- --template react
cd my-app
npm run dev

Adding Syncfusion® packages

All the available Essential® JS 2 packages are published in npmjs.com public registry.

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

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

Adding CSS Reference

To render the Tooltip component, need to import Tooltip and its dependent component’s styles as given below in src/App.css.

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

Note: If you want to refer the combined component styles, please make use of our CRG (Custom Resource Generator) in your application.

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>);
}

Run the application

Now run the npm run dev command in the console to start the development server. This command compiles your code and serves the application locally, opening it in the browser.

npm run dev

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 tooltipElement" id="target" >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 tooltipElement" id="target" >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/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/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>
.tooltipElement {
    position: relative;
    left: 50%;
    margin-top: 150px;
    transform: translateX(-50%);
}

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>
                    <tbody>
                        <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>
                    </tbody>
                </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>
                        <tbody>
                            <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>
                        </tbody>
                    </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