Search code examples
jqueryliverate

jQuery rating - how to show chosen value on hover?


I'm using jquery.rating.js plugin and I wrote a litle function that shows the value of clicked input but I want to show the value on hover too.

$(document).ready(function() {
if($('.star-rating-on')) {
    $('.star-rating-on a').live('click', function() {
        var note1 = $('.star-rating-on a:last').attr('title');
        $('#i-choose').html(note1 +'.0');
    });
} else { 
    $('.star-rating-hover a:last').live('hover', function() {
        var note = $('.star-rating-hover a:last').attr('title');
        $('#i-choose').html(note +'.0');
    });
} 
})

the html

<input type="radio" class="star required" value="1" name="rating" />
<input type="radio" class="star required" value="2" name="rating" />
<input type="radio" class="star required" value="3" name="rating" />
<input type="radio" class="star required" value="4" name="rating" />
<input type="radio" class="star required" value="5" name="rating" />
<div id="i-choose">Your rate</div>

first problem: on hover doesn't show the value. second problem: show earlier selected value if I accidentaly point cursor on the input.


Solution

  • You don't have to involve jQuery in the hover feature, unless I've misunderstood something or unless you want to style the hover text.

    If you add title="1" to the input then the tooltip will display 1 when you hover it.