Getting Started

5 Jan 202418 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

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

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

npx create-react-app my-app --template typescript

cd my-app

npm start

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

npx create-react-app my-app

cd my-app

npm start

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, use the npm start command to run the application in the browser.

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 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/27.2.2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/27.2.2/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>
                <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