Syncfusion AI Assistant

How can I help you?

Tooltip in React Rating Component

21 Feb 20269 minutes to read

Display tooltips in rating items by setting the showTooltip property to true. When enabled, tooltips appear when users hover over rating items.

// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    return (<div className='wrap'>
            <RatingComponent id='rating' showTooltip={true} value={3}></RatingComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' showTooltip={true} value={3} ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Tooltip template

Customize the Rating tooltip using the tooltipTemplate tag directive. The current rating value is passed as the value property in the template context, allowing you to display dynamic information about the rating.

// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    function tooltipTemplate(props) {
        if (props.value === 1) {
            return (<b>Angry</b>);
        }
        else if (props.value === 2) {
            return (<b>Sad</b>);
        }
        else if (props.value === 3) {
            return (<b>Neutral</b>);
        }
        else if (props.value === 4) {
            return (<b>Good</b>);
        }
        else {
            return (<b>Happy</b>);
        }
    }
    return (<div className='wrap'>
          <RatingComponent id='rating' showTooltip={true} value={3} tooltipTemplate={tooltipTemplate}></RatingComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {

    function tooltipTemplate(props: any) {
        if(props.value === 1){
            return (<b>Angry</b>);}
        else if(props.value === 2){
            return (<b>Sad</b>);}
        else if(props.value === 3){
            return (<b>Neutral</b>);}
        else if(props.value === 4){
            return (<b>Good</b>);}
        else {
            return (<b>Happy</b>);}
    }
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' showTooltip={true} value={3} tooltipTemplate={tooltipTemplate} ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Tooltip customization

Customize tooltip appearance using the cssClass property and defining custom styles for tooltip elements.

For more information about customizing tooltip appearance, refer to the Tooltip Customization documentation.

// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render Rating.
function App() {
    return (<div className='wrap'>
          <RatingComponent id='rating' showTooltip={true} value={3} cssClass='customtooltip'></RatingComponent>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the Rating.
import { RatingComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render Rating.
function App() {
  
    return (
        <div className='wrap'>
            <RatingComponent id='rating' showTooltip={true} value={3} cssClass='customtooltip' ></RatingComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));
/* Represents the styles for loader */
#loader {
    color: #008cff;
    font-family: 'Helvetica Neue', 'calibiri';
    font-size: 14px;
    height: 40px;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 30%;
}

.wrap {
    margin: 50px auto;
    text-align: center;
}

/* To change the radius of the tooltip corners. */
.customtooltip.e-tooltip-wrap {
  border-radius: 3px;
}

/* To change the size of the tooltip content. */
.customtooltip.e-tooltip-wrap .e-tip-content {
  font-size:14px;
}

/* To change the border color and width for tooltip. */
.customtooltip.e-tooltip-wrap.e-popup {
  border: 2px solid #000000;
}

/* To change the color for arrow of the tooltip. */
.customtooltip.e-tooltip-wrap .e-arrow-tip-inner.e-tip-bottom {
  border: 12px #9693
}

/* To change the top border color for arrow of the tooltip. */
.customtooltip.e-tooltip-wrap .e-arrow-tip-outer.e-tip-bottom {
  border-top: 9.5px solid #000000;
}