javascript - Replicate Yelp star review widget -

im trying replicate star rating widget on yelp.com - 5 star rating widget hover on next star, previous stars change color match active star. need hover state displays description star rating.

you can see widget in action here: https://www.yelp.com/writeareview/biz/c5siha89rv4gw05zd8vlqg?return_url=%2fwriteareview%2fsearch%3fwar_desc%3dtacos%26war_loc%3daustin%252c%2btx

any hugely appreciated!

made without js here's result:

.stars{    display:inline-block;    position:relative;  }  .stars span{    color:#999;    display:inline-block;    vertical-align:middle;    float:right;    cursor:pointer;  }  .stars>span:hover:after{    position:absolute;    content: attr(title);    left:100%;  }    .stars>span:nth-child(1):hover,  .stars>span:nth-child(1):hover ~ span{color: red;}  .stars>span:nth-child(2):hover,  .stars>span:nth-child(2):hover ~ span{color: #f73;}  .stars>span:nth-child(3):hover,  .stars>span:nth-child(3):hover ~ span{color: #fa2;}  .stars>span:nth-child(4):hover,  .stars>span:nth-child(4):hover ~ span{color: #eb2;}  .stars>span:nth-child(5):hover,  .stars>span:nth-child(5):hover ~ span{color: #d92;}

<div class="stars">    <span title="wow">&#9733;</span>    <span title="lol">&#9733;</span>    <span title="yey">&#9733;</span>    <span title="hmm">&#9733;</span>    <span title="boo">&#9733;</span>  </div>

now in js or jquery need assign active class , submit vote server (like in jsbin demo).

edit:

since above can bit buggy ("thanks" css) here's js (jquery) example:

var msg = ["hover , click rate!","boo","hmm","yey","lol","wow"];    $("[data-stars]").each(function(){        var $el = $(this);    var h   = $el.height();    var w   = $el.width();    var old = $el.data("stars");    var now;    var $info = $("<span/>");      $el.append($info);      function setstars( val ){      $el.attr("data-stars", val);      $info.text( msg[val] );    }    setstars( old );        $el.on("mousemove", function(e){      = (e.pagex-$(this).offset().left)/w*5 +1|0;      setstars( );    }).on("mouseleave", function(){      setstars( old );    }).on("click", function(){      old = now;      setstars( old );      // submit `old` string value ("1-5") server using ajax     });      });

[data-stars]{    display:inline-block;    vertical-align:middle;    position:relative;    height:30px;    width:150px;    background:url(http://i.stack.imgur.com/zpq8g.png) 0 0 / cover;  }  [data-stars]>span{    position:absolute;    white-space:nowrap;    left:100%;    top:9px;  }  [data-stars="0"]{background-position:0    0px;}  [data-stars="1"]{background-position:0  -30px;}  [data-stars="2"]{background-position:0  -60px;}  [data-stars="3"]{background-position:0  -90px;}  [data-stars="4"]{background-position:0 -120px;}  [data-stars="5"]{background-position:0 -150px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div data-stars=0></div><br>  <div data-stars=2></div><br>  <div data-stars=5></div><br>  <div data-stars=4></div>