JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.fyneworks.com/jquery/star-rating/jquery.rating.js"></script>
<link rel="stylesheet" href="http://www.fyneworks.com/jquery/star-rating/jquery.rating.css">
<script src="http://www.fyneworks.com/jquery/star-rating/jquery.MetaData.js"></script>
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Absolute Garbage- ¼ Star" value=".25" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Garbage- ½ Star" value=".5" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Unwatchable- ¾ Star" value=".75" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Trash- 1 Star" value="1" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Very Very Poor- 1¼ Stars" value="1.25" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Very Poor- 1½ Stars" value="1.5" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Pretty Poor- 1¾ Stars" value="1.75" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Poor- 2 Stars" value="2" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Below Average- 2¼ Stars" value="2.25" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Average- 2½ Stars" value="2.5" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Slightly Above Average- 2¾ Stars" value="2.75" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Above Average- 3 Stars" value="3" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Almost Good- 3¼ Stars" value="3.25" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate" title="Good- 3½ Stars" value="3.5" />
<input class="hover-star xxx-star {split:4}" type="radio" name="rate"...
JavaScript
$(function(){
$('.hover-star').rating({
focus: function(value, link){
var tip = $('#hover-test');
tip[0].data = tip[0].data || tip.html();
tip.html(link.title || 'value: '+value);
},
blur: function(value, link){
var tip = $('#hover-test');
$('#hover-test').html(tip[0].data || '');
}
});
});