Customization in React Tooltip component

28 Jan 202513 minutes to read

The Tooltip can be customized using the cssClass property. This property accepts custom CSS class names that define specific user-defined styles and themes to be applied to the Tooltip element.

Tip pointer customization

The tip pointer’s size, background, and border colors can be styled using the cssClass property, as shown below:

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    return (<TooltipComponent className="tooltip-box" content='Tooltip arrow customized' cssClass='customtip'>
        <div id='target'>Show Tooltip</div>
    </TooltipComponent>);
}
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 (
    <TooltipComponent className="tooltip-box" content='Tooltip arrow customized' cssClass='customtip'>
      <div id='target'>Show Tooltip</div>
    </TooltipComponent>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#container {
    visibility: hidden;
}

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

#target {
    background-color: #cfd8dc;
    border: 3px solid #eceff1;
    box-sizing: border-box;
    margin: 80px auto;
    padding: 20px 0;
    width: 200px;
    text-align: center;
    color: #424242;
    font-size: 20px;
    user-select: none;
}
.customtip.e-tooltip-wrap {
    padding: 4px;
}

.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
    height: 20px;
    width: 12px;
}

.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    height: 20px;
    width: 12px;
}

.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
    height: 12px;
    width: 20px;
}

.customtip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
    height: 12px;
    width: 20px;
}

.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 20px solid #616161;
}

.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom: 20px solid #616161;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-bottom: 6px solid transparent;
    border-right: 20px solid #616161;
    border-top: 6px solid transparent;
}

.customtip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-bottom: 6px solid transparent;
    border-left: 20px solid #616161;
    border-top: 6px solid transparent;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.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>

Tooltip customization

The overall appearance of the Tooltip can be customized by changing its background color, opacity, content font, and other properties. The following code example demonstrates how to achieve this customization.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { TooltipComponent } from '@syncfusion/ej2-react-popups';
function App() {
    return (<TooltipComponent className="tooltip-box" content='Tooltip customized' cssClass='customtooltip'>
        <div id="target">Show Tooltip</div>
    </TooltipComponent>);
}
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 (
    <TooltipComponent className="tooltip-box" content='Tooltip customized' cssClass='customtooltip'>
      <div id="target">Show Tooltip</div>
    </TooltipComponent>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('sample'));
#container {
    visibility: hidden;
}

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

#target {
    background-color: #cfd8dc;
    border: 3px solid #eceff1;
    box-sizing: border-box;
    margin: 80px auto;
    padding: 20px 0;
    width: 200px;
    text-align: center;
    color: #424242;
    font-size: 20px;
    user-select: none;
}

.customtooltip.e-tooltip-wrap .e-tip-content {
    line-height: 20px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-bottom {
    height: 12px;
    left: 50%;
    top: 100%;
    width: 24px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-top {
    height: 12px;
    left: 50%;
    top: -9px;
    width: 24px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-left {
    height: 24px;
    left: -9px;
    top: 48%;
    width: 12px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip.e-tip-right {
    height: 24px;
    left: 100%;
    top: 50%;
    width: 12px;
}

.customtooltip.e-tooltip-wrap {
    border-radius: 4px;
    opacity: 1;
}

.customtooltip.e-tooltip-wrap.e-popup {
    background-color: #fff;
    border: 2px solid #000;
}

.customtooltip.e-tooltip-wrap .e-tip-content {
    color: #000;
    font-size: 12px;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
    border-left: 12px solid transparent;
    border-right: 14px solid transparent;
    border-top: 12px solid #000;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-top {
    border-bottom: 12px solid #000;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-left {
    border-bottom: 12px solid transparent;
    border-right: 12px solid #000;
    border-top: 12px solid transparent;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-right {
    border-bottom: 12px solid transparent;
    border-left: 12px solid #000;
    border-top: 12px solid transparent;
}

.customtooltip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
    color: #fff;
    font-size: 25.9px;
}
<!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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="index.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>