Embed the Rating component in your HTML by using a div with data-coreui-toggle="rating". Set the initial value with data-coreui-value.

Set the Rating component to read-only by adding data-coreui-read-only="true". This disables interaction, preventing users from changing the displayed rating value.

Add the data-coreui-disabled="true" boolean attribute to give it a grayed out appearance, remove pointer events, and prevent focusing.

Adjust the granularity of the Rating component by setting data-coreui-precision. This attribute allows for fractional ratings, such as quarter values, to provide more precise feedback.

Control the total number of rating items displayed by using data-coreui-item-count. You can create a Rating component with a custom scale, be it larger for detailed assessments or smaller for simplicity.

Enable descriptive text on hover by setting data-coreui-tooltips to true. This provides immediate feedback or guidance as the user interacts with the rating items.

For custom messages, provide a comma-separated list of tooltips corresponding to each rating value to enhance the user’s understanding of each rating level.

Larger or smaller rating component? Add data-coreui-size="lg" or data-coreui-size="sm" for additional sizes.