Getting started with React Tooltip component

30 Jul 2021 / 4 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

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.

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';

export default class App extends React.Component<{}, {}> {
  render() {
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';
export default class App extends React.Component {
    render() {
        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:

Source

Preview

index.jsx

index.tsx

index.html

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
class App extends React.Component {
    render() {
        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>);
    }
}
ReactDom.render(<App />, document.getElementById('sample'));

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';

class App extends React.Component<{}, {}> {
  render() {
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>
);
  }
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

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

</html>

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.

Source

Preview

index.tsx

index.html

index.css

index.jsx

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';

class App extends React.Component<{}, {}> {
  render() {
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>
);
  }
}
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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/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>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .wrap {
            margin: 5px;
        }

        .drop-inline {
            display: inline-block;
            margin-top: 10px;
            width: 150px;
        }

        .tooltip-box {
            background-color: #ececec;
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            margin: 80px auto;
            padding: 10px;
            width: 100px;
        }

        #details table th,
        #details table td {
            padding: 15px;
            text-align: left;
        }

        #details .info {
            font-weight: bold;
        }

        #sample, #clear {
            margin: 10px;
        }

        #targetContainer {
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            height: 360px;
            margin: 5px;
            overflow: hidden;
            position: relative;
        }

        #demoSmart {
            background: rebeccapurple;
            height: 40px;
            left: 35%;
            position: absolute;
            top: 35%;
            width: 40px;
        }

        #box {
            display: inline-block;
            margin: 60px;
        }

        #disabledbutton {
            pointer-events: none;
        }

        .blocks {
            background-color: #ececec;
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            display: inline-block;
            line-height: 50px;
            margin: 0 10px 10px 0;
            overflow: hidden;
            text-align: center;
            vertical-align: middle;
            width: 200px;
        }

        .blocks input {
            line-height: normal;
        }

        .circle-container {
            border: 1px solid #c8c8c8;
            box-sizing: border-box;
            height: 200px;
            margin-left: 10px;
            margin-right: 10px;
            position: relative;
        }

        .circle-tool {
            background: #9acd32;
            border-radius: 50px;
            height: 20px;
            position: absolute;
            width: 20px;
        }
    </style>
</head>

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

</html>

#container {
    width: 500px;
    margin: auto;
    transform: translateX(10%);
}

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

#details table th,
#details table td {
    padding: 20px 10px;
    text-align: left;
}

#details .info {
    font-size: 14px;
    text-align: left;
    font-weight: 500;
}

.center {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

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';
class App extends React.Component {
    render() {
        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>);
    }
}
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.

Getting started with React Tooltip component

Dependencies

Installation and configuration

Initialize the Tooltip on a single element

Initialize Tooltip within a container

See Also