Tool tip in Vue Rating component

11 Jun 20249 minutes to read

The rating component 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.

<template>
  <div class='wrap'>
    <ejs-rating id="rating" value="3" :showTooltip="true"></ejs-rating>
  </div>
</template>

<script setup>

import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}
</style>
<template>
  <div class='wrap'>
    <ejs-rating id="rating" value="3" :showTooltip="true"></ejs-rating>
  </div>
</template>

<script>

import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-rating": RatingComponent
  },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
  margin: 50px auto;
  text-align: center;
}
</style>

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.

<template>
    <div class='wrap'>
        <ejs-rating id="rating" value="3" :showTooltip="true" :tooltipTemplate="tooltipTemplate"></ejs-rating>
    </div>
</template>

<script setup>

import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
import { createApp } from 'vue';

enableRipple(true);

const app = createApp()

var ratingTooltipTemplate = app.component("tooltipTemplate", {
    template: `<b v-if='data.value==1'>Angry</b>
             <b v-else-if='data.value==2'>Sad</b>
             <b v-else-if='data.value==3'>Neutral</b>
             <b v-else-if='data.value==4'>Good</b>
             <b v-else>Happy</b>`,
    data() {
        return {
            data: {}
        };
    }
});

const tooltipTemplate = () => {
    return {
        template: ratingTooltipTemplate
    }
};
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
    margin: 50px auto;
    text-align: center;
}
</style>
<template>
    <div class='wrap'>
        <ejs-rating id="rating" value="3" :showTooltip="true" :tooltipTemplate="tooltipTemplate"></ejs-rating>
    </div>
</template>

<script>

import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';
import { createApp } from 'vue';

enableRipple(true);

const app = createApp();

var ratingTooltipTemplate = app.component("tooltipTemplate", {
    template: `<b v-if='data.value==1'>Angry</b>
             <b v-else-if='data.value==2'>Sad</b>
             <b v-else-if='data.value==3'>Neutral</b>
             <b v-else-if='data.value==4'>Good</b>
             <b v-else>Happy</b>`,
    data() {
        return {
            data: {}
        };
    }
});

export default {
    name: "App",
    components: {
        "ejs-rating": RatingComponent
    },
    data() {
        return {
            tooltipTemplate: function () {
                return {
                    template: ratingTooltipTemplate
                }
            }
        }
    }
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.wrap {
    margin: 50px auto;
    text-align: center;
}
</style>

Tooltip customization

You can customize the appearance of the tooltips using the cssClass property of the rating component 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.

<template>
  <div class='wrap'>
    <ejs-rating id="rating" value="3" :showTooltip="true" cssClass="customtooltip"></ejs-rating>
  </div>
</template>

<script setup>

import { RatingComponent as EjsRating } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

.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;
}
</style>
<template>
  <div class='wrap'>
    <ejs-rating id="rating" value="3" :showTooltip="true" cssClass="customtooltip"></ejs-rating>
  </div>
</template>

<script>

import { RatingComponent } from "@syncfusion/ej2-vue-inputs";
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

export default {
  name: "App",
  components: {
    "ejs-rating": RatingComponent
  },
}
</script>

<style>
@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';

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