Customization in React Tooltip component

02 Feb 2023 / 1 minute to read

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

Tip pointer customization

Styling the tip pointer’s size, background, and border colors can be done using the cssClass property, as given below.

Source

Preview

App.jsx

index.jsx

index.html

index.css

App.tsx

index.tsx

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

<!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/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/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>
</head>

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

</html>

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


/* csslint ignore:start */

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


/* csslint ignore:end */

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

The complete look and feel of the Tooltip can be customized by changing it’s background color, opacity, content font, etc. The following code example shows the way to achieve it.