0

I have this star rating lightning component. I need to show a tooltip that shows the number of the star that the cursor is on and not the rating that is selected. I know I can get the value of rating and show that but I don't want that. I am open to changing my code to change the value of the rating onhover instead of onclick if that would make it easier/better.

ScreenShot of Test App

<aura:component description="StarRating">
<aura:attribute name='value' type='Integer' default='0' />
<aura:attribute name='readonly' type='boolean' default='false' />
<aura:registerEvent name="DummyEvent" type="akritiv:DummyEvent"/>

<ltng:require styles="{!$Resource.fivestar + '/rating.css'}"
              scripts="{!$Resource.fivestar + '/rating.js'}"
              afterScriptsLoaded="{!c.afterScriptsLoaded}" />


    <aura:handler name='change' value="{!v.value}" action="{!c.onValueChange}" />

   <p class="rating"> <div class="slds-text-heading_small">Rating</div></p> 
       <ul aura:id='ratingArea' class="{!v.readonly ? 'readonly c-rating' : 'c-rating' }" />



</aura:component>

JS Controller

({
    afterScriptsLoaded : function(component, event, helper) {
        var domEl = component.find("ratingArea").getElement();
        console.log('domEl>>>'+JSON.stringify(domEl));
        var currentRating = component.get('v.value');
        console.log('currentRating>>>'+currentRating);
        var readOnly = component.get('v.readonly');
        console.log('readOnly>>>'+readOnly);
        var maxRating = 5;
        var callback = function(rating) {
            component.set('v.value',rating);
        }
        component.ratingObj = rating(domEl,currentRating,maxRating,callback,readOnly);
    },

    onValueChange: function(component,event,helper) {
        if (component.ratingObj) {
            var value = component.get('v.value');

            var v =component.ratingObj.domEl;
            console.log('v'+v);
            component.ratingObj.setRating(value,false);
            var cmpEvent = component.getEvent("DummyEvent");
            cmpEvent.setParams({"getRatingvalue" : value });
            cmpEvent.fire();
        }
    },

})
2
  • Welcome! Can you please edit your post to show your code more clearly? Also, I don't see the actual markup for the 5 stars component you're showing. Apr 4 '19 at 7:00
  • I've edited the post now. Apr 4 '19 at 7:13
0

For easy tooltip hovers, consider using <lightning:helptext>, which you can read about here

You can also just leverage the title element attribute on <li> to show the number after hovering for a couple seconds

2
  • The problem is that if I select a value for eg. 3. I can show that in the helptext. But I want to show the star number when I hover over a particular star. For eg. If I hover over the 4th star I should see 4 on the tooltip and not 3. Apr 4 '19 at 7:15
  • Try just using the title attribute on the <li> element. If you hover for a couple seconds, it should show up, like any other element Apr 4 '19 at 7:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.