Customization in React Tooltip component

14 Aug 20233 minutes 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.

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

Tooltip customization

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.

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