Tooltip in EJ2 TypeScript Rating control
29 Aug 202312 minutes to read
The rating control supports tooltip to show additional information in rating items by setting the showTooltip
property. If enabled, the tooltip appears when the user hovers over a rating item.
import { Rating } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// Initialize the Show Tooltip Rating control.
let rating: Rating = new Rating({ showTooltip:true, value:3 });
// Render initialized Rating.
rating.appendTo('#rating');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Rating</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript Rating Control" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.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='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<input id="rating"/>
</div>
</div>
<script id="tooltipTemplate" type="text/x-jsrender">
${if(value==1)}
<b>Angry</b> ${else if(value==2)}
<b>Sad</b> ${else if(value==3)}
<b>Neutral</b> ${else if(value==4)}
<b>Good</b> ${else}
<b>Happy</b>
${/if}
</script>
</body>
</html>
#container {
visibility: hidden;
}
#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;
}
Tooltip template
You can use the tooltipTemplate
tag directive to specify a custom template for the tooltip
of the rating. The current value of the rating will be passed as the value
property in the template context when building the content of the tooltip. This allows you to include dynamic information about the rating in the template.
import { Rating } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// Initialize the Tooltip Template Rating control.
let rating: Rating = new Rating({ showTooltip:true, value:3, tooltipTemplate:'#tooltipTemplate' });
// Render initialized Rating.
rating.appendTo('#rating');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Rating</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript Rating Control" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.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='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<input id="rating"/>
</div>
</div>
<script id="tooltipTemplate" type="text/x-jsrender">
${if(value==1)}
<b>Angry</b> ${else if(value==2)}
<b>Sad</b> ${else if(value==3)}
<b>Neutral</b> ${else if(value==4)}
<b>Good</b> ${else}
<b>Happy</b>
${/if}
</script>
</body>
</html>
#container {
visibility: hidden;
}
#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;
}
Tooltip customization
You can customize the appearance of the tooltips using the cssClass
property of the rating control and by defining the custom styles for tooltip elements like the below example.
You can find more information about customizing the appearance of the tooltip in the Tooltip Customization documentation.
import { Rating } from '@syncfusion/ej2-inputs';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// Initialize the Custom Tooltip Rating control.
let rating: Rating = new Rating({ cssClass:"customtooltip", showTooltip:true, value:3 });
// Render initialized Rating.
rating.appendTo('#rating');
<!DOCTYPE html>
<html lang="en">
<head>
<title>EJ2 Rating</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="TypeScript Rating Control" />
<meta name="author" content="Syncfusion" />
<link href="styles.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/27.1.48/ej2-inputs/styles/material.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='loader'>Loading....</div>
<div id='container'>
<div class='wrap'>
<input id="rating"/>
</div>
</div>
<script id="tooltipTemplate" type="text/x-jsrender">
${if(value==1)}
<b>Angry</b> ${else if(value==2)}
<b>Sad</b> ${else if(value==3)}
<b>Neutral</b> ${else if(value==4)}
<b>Good</b> ${else}
<b>Happy</b>
${/if}
</script>
</body>
</html>
#container {
visibility: hidden;
}
#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;
}