I have this which is working well:

    <div class="form-group">
                            <label for="difficulty" class="col-sm-2 control-label">
                                Condition
                            </label>
                            <div class="col-sm-10">
                                <select id="difficulty" class="form-control select2">
                                    {{#each difficultyLevels}}
                                        <option value="{{_id}}">{{level}}</option>
                                    {{/each}}
                                </select>
                                <div class="rateit" data-rateit-backingfld="#difficulty" data-rateit-step="1"></div>                            
                            </div>
                        </div>

Helper:

    difficultyLevels(){
            return DifficultyLevels.find({}, {sort: {"_id":1}});
        }

Now I would like to add a tooltip to each option (star). The text is the same {{level}} value.
How can I do that in meteor 1.3?

I've seen this: rateit tooltip but still cannot make it work.

Thank you

Rate it is not displaying my stars properly when i'm trying to load it on my phonegap / cordova jquery mobile app. It's displaying stars as â~... for 1 star and so on. Do you have a fix?

Hi , I am trying to set step value on 0.25 but its always acting on 0.25. My code is

 <div class="y-meter-rating">

                                <div style="font-size:53px" id="y-demo" class="rateit" data-rateit-icon="M"
                                     data-rateit-mode="font">
                                </div>
                                <script type="text/javascript">
                                    $('#y-demo').rateit({
                                        max: 5,
                                        step: 0.25,

                                    });
                                    var selected = 0;
                                    $("#y-demo").bind('over', function (event, value) {
                                        if (value == null) {
                                            $('#value6').text(selected);
                                        } else {
                                            $('#value6').text(value);
                                        }
                                    });

                                    $("#y-demo").bind('rated', function (event, value) {
                                        selected = value
                                        $('#value6').text(value);
                                    });


                                </script>
                                {#                                <div id="rateYo1" style="width: 200px !important;"></div>#}
                                <div id="data-show" class="data-show data-show-y" style="width: 100%;">
                                    <p id="value6">0.0</p>
                                </div>
                            </div>
                        </div>
                    </div>

Kindly notify if its plugin issue or I am doing something wrong. I am drawing on M alphabet

Hello, is it possible to disable right click for rated event?

The https://github.com/gjunge/rateit.js/blob/master/scripts/jquery.rateit.min.js have Version Number 1.0.22 and the jquery.rateit.js have version number 1.0.23.

It is the .min.js currently on Version 1.0.22 ?

Because the reset button is given a role of none, it's not announced by assistive technology.

To resolve this, I think all that we have to do is remove the role attribute and let the button semantics reflect through. I'll open a pull request shortly.

Thanks!

i belive the rateit version not is compatible with the lastest wordpress version, when i used the plugin, stars do not display in my div in theme.

i needs help, please.

Cannot able to re size the star icon followed as per the documentation . And also when the value is being reset rateit star icon is not getting resetted .

I tried implementing rateit into my table with but its not showing up. The table is dynamically generated. Any idea why?

On https://gjunge.github.io/rateit.js/examples/, my browser is refusing to load jQuery over HTTP when the rest of the page is HTTPS. I recommend changing the script URL from http://ajax.googleapis.com/... to just //ajax.googleapis.com/....

dir="rtl" on the rateit element seem to work, but dir="auto" does not work.

My language direction is not known in advance, and I need to set it programmatically.
Setting the css attribute "direction" or attr "dir" doesn't seem to have an impact on direction.

Please advise.

Stars do not display after an element with rateit stars is added into the DOM of page. Needs fix.

Hi!! I have added custom star image(using CSS), and I have set "readonly: true; ispreset: true; step: 0.5", but it's still showing 0.1 step increment.

We are using this HTML code, which is pretty straightforward:

<div class='my-4' data-controller='rated'>
    <div class='rateit' data-rateit-mode='font' data-rateit-resetable='false' style='font-size: 58px'></div>
</div>

But are seeing this when hovering:

Any thoughts? We tried reinstantiating the plugin but the same thing happens

Great plugin! Thank you.

I have two sets of review stars for an item. One is the "overall rating" and the other is "my rating" - allows people to see how they rated the item. I'd like to use ajax/jquery to update the overall rating when someone rates or updates their rating in the "my rating" section.

No problem with ajax in getting the rating to save in the back end, but I'm having trouble getting the "overall rating" to update to reflect the new numbers.

Will you consider adding an example where rateit is being set by a json string? I have been experimenting with the way you use the buttons to dynamically set values but I'm not getting anywhere.

We would like to have a none jquery version of rateit.js

This way we can be relevant also in modern platforms that do not include jQuery.

Parent elements that have a css attribute of "display: none" somewhere during DOM load prevents the rating bar from displaying any stars or receiving any clicks. The stars remain empty regardless of value.

Hello

first of all it is a very good job

My issue is

                             <select id="packaging">
                                <option value="0">0</option>
                                <option value="2">2</option>
                                <option value="5">5</option>
                            </select>
                            <div class="rateit" data-rateit-backingfld="#packaging" data-rateit-min="0" ></div>
``
Strange behavior
I can select 0,2,4,6 stars the 6th appears when I pass over the 5th star. But I would like to select only 0,2 & 5 stars

Thank you for reading, 

Hi
I work with ansp.net core 2.2 and have looked for rate controls, investigated some and decided for rateit.js as it is lean an clean - especially to pass the parameters over an input is a good idea.
So.. first... congrats for your good work.
What is missing, is the possibility to show (custom) tool-tips on hoover over the stars and to show a (custom) text, when the user has rated.
I have implemented the texte to rated myself, but this is not so nice and a lot of work (I have various rateit's on my view).
So... proposal:
Add parameters for custom text to the Rating/ the stars, E.g.:
ResetOnHooverText (= "Reset your Rating" / German "Setzen Sie Ihre Bewertung zurück)
Star1OnHooverText (= "Very Poor" / German: "Sehr schlecht")
Star1OnRatedText (= "Very Poor" / German: "Sehr schlecht")
Star2OnHooverText (= "Poor" / German: "Schlecht")
Star2OnRatedText (= "Poor" / German: "Schlecht")
Star3OnHooverText (= "Neutral" / German: "Neutral")
Star3OnRatedText (= "Neutral" / German: "Neutral" )
Star4OnHooverText (= "Good" / German: "Gut")
Star4OnRatedText (= "Good" / German: "Gut"))
Star5OnHooverText (= "Very good" / German: "Sehr gut")
Star5OnRatedText (= "Very good" / German: "Sehr gut"))
.... further Star.. if used (I think. mostly 4 or 5 stars are used...)
NotRatedText (= "Not Rated" / German: "Nicht bewertet")

Show the OnHoover text (as tooltip) if a star or the reset symbol is hoovered.
Show the RatedText on the right of the control
Define a further input for these parameters

after post back rating lost inside updatepanel

i use custom value. in js, $('#getbacking' + i).rateit('value');

i just got the index not. the value.. why? how to solve it

Hi, thank you for this jQuery plugin.
When the star rating is set to readonly, it still adds tabindex="0" to the html. When tabbing through the webpage over links and form elements, this element is being focused as well. It is however not editable, so there is no point in giving it focus on tabbing. This will add confusion for people with disabilities who depend on their keyboard.

I think it is better to only have tabindex="0" when the star rating is editable, but not when readonly.

I'm using this tool to rating on my website, but it does not be responsive layout.. would it be possible to render stars rating in responsive layout for using in mobile devices?

Hi,

It would be great to allow to define the path of star.gif directly in the javascript/jquery declaration.
I use gulp and a lot of tools and I end with the plugin not displaying the stars because it is looking for the star.gif where my final css build is stored...

I work around but it a suggestion you may consider.

:-)

I was not able to add spacing between starts with CSS using the images example. How can I do this?