<h1 class=title>Star Rating System</h1>
<div class="container">
  <div class="ops">
  <div class="rating tooltip tt0 expand">
    <div class="public-stars right">
      <p class="fas star rated"></p>
      <p class="fas star rated"></p>
      <p class="fas star rated"></p>
      <p class="far star"></p>
      <p class="far star"></p>
    </div>
    <div class="user-stars right">
      <p class="far star"></p>
      <p class="far star"></p>
      <p class="far star"></p>
      <p class="far star"></p>
      <p class="far star"></p>
    </div>
  </div>
</div>
</div>

body{
  background: #2A2B30;  
  color: #2e9c91;
  text-align: center;
}

.title{
  font-family: "Roboto", "Arial", sans-serif;
}

.container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ops{
  display: -webkit-box;
}
  /*    TOOLTIP   */
.ops .rating.tooltip {
  position: relative;
  opacity: 1;
  z-index: 1;
  color: #cecece;
}

.ops .rating.tooltip:before,
.ops .rating.tooltip:after {
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.ops .rating.tooltip:after {
	border-right: 6px solid transparent;
	border-top: 6px solid #8EA4D2; 
  border-left: 6px solid transparent;
  content: '';
  height: 0;
  left: 10px;
  width: 0;
}

.ops .rating.tooltip:before {
  background: #8EA4D2;
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  padding: 6px 10px;
  top: -35px;
  white-space: nowrap;
}

.ops .rating.tooltip.expand:before {
  transform: scale3d(.2,.2,1);
  transition: all .2s ease-in-out;
}

.ops .rating.tooltip.expand:after {
  transform: translate3d(0,6px,0);
  transition: all .1s ease-in-out;
}

.ops .rating.tooltip.expand:hover:before,
.ops .rating.tooltip.expand:hover:after {
  opacity: 1;
  transform: scale3d(1,1,1);
}

.ops .rating.tooltip.expand:hover:after {
  transition: all .2s .1s ease-in-out;
}

.ops .rating.tooltip.tt0:before { content: 'Rate this preset'; left: 26px;}
.ops .rating.tooltip.tt0.expand:hover:after { opacity: 0; }

.ops .rating.tooltip.tt1:before { content: 'Your vote: 1/5'; left: 0;}
.ops .rating.tooltip.tt1:after { top: -7px; left: 10px;}

.ops .rating.tooltip.tt2:before { content: 'Your vote: 2/5'; left: 30px;}
.ops .rating.tooltip.tt2:after { top: -7px; left: 40px;}

.ops .rating.tooltip.tt3:before { content: 'Your vote: 3/5'; left: 60px;}
.ops .rating.tooltip.tt3:after { top: -7px; left: 72px;}

.ops .rating.tooltip.tt4:before { content: 'Your vote: 4/5'; left: 90px;}
.ops .rating.tooltip.tt4:after { top: -7px; left: 102px;}

.ops .rating.tooltip.tt5:before { content: 'Your vote: 5/5'; left: 120px;}
.ops .rating.tooltip.tt5:after { top: -7px; left: 133px;}


/*  ----------------------  */

.ops .rating .public-stars {
    position: relative;
    z-index: 1;
}

.ops .rating .user-stars {
    position: absolute;
    width: 100%; height: 100%;
    top: 0; left: 0;
    opacity: 0;
    z-index: 2;
    -webkit-transition: opacity 0.25s linear;
    -o-transition: opacity 0.25s linear;
    transition: opacity 0.25s linear;
}

.ops .rating:hover .public-stars {
  opacity: 0;
}

.ops .rating:hover .user-stars {
  opacity: 1;
}

.ops .rating .star {
    float: left;
    padding: 5px 2px;
    cursor: pointer;
    transition: 0.5s padding ease;
    margin: 0;
}
.ops .rating .public-stars .star:before, .ops .rating .user-stars .star:before{
    font-family: 'Font Awesome 5 Free';
    content: '\f005';
    font-size: 1.5em;
    text-shadow: none;
}

.ops .rating .public-stars .star:before{
  color: #2e9c91;
}

.ops .rating .user-stars .star:before{
  color: #8EA4D2;
}

.ops .rating .user-stars .star:active{
    padding: 0 2px;
}

.ops .rating .user-stars .star:hover:before, .ops .rating .user-stars .star.to_rate:before, .ops .rating .user-stars .star.rated:before {
    color: #8EA4D2;
}

.ops .rating .user-stars .star:hover:before, .rating .user-stars .star.to_rate:before{
    text-shadow: 0 0 6px #8EA4D2;
}

.ops .rating .user-stars .star.no_to_rate:before {
    color: #8EA4D2;
}

$('.rating .user-stars .star').hover(function() {
  $(this).addClass('fas to_rate');
  $(this).parent().find('.star:lt(' + $(this).index() + ')').addClass('fas to_rate');
  $(this).parent().find('.star:gt(' + $(this).index() + ')').addClass('no_to_rate');
}).mouseout(function() {
  $(this).parent().find('.star').removeClass('to_rate');
  $(this).parent().find('.star:not(.rated)').removeClass("fas").addClass("far");
  $(this).parent().find('.star:gt(' + $(this).index() + ')').removeClass('no_to_rate');
}).click(function() {
  var index = $(this).index()+1;
  var rating = $(this).closest(".rating");
  var classList = $(rating).attr("class");
  var classArray = classList.split(/\s+/);
  var current_tt_class;
  $(classArray).each(function(index, item) {
      if (item.substr(0, 2) === 'tt') {
          current_tt_class = item;
      }
  });
  
  $(".ops .rating").removeClass(current_tt_class).addClass("tt"+index);
  $(this).removeClass('to_rate').addClass('fas rated');
  $(this).parent().find('.star:lt(' + $(this).index() + ')').removeClass('far to_rate').addClass('fas rated');
  $(this).parent().find('.star:gt(' + $(this).index() + ')').removeClass('no_to_rate').removeClass('fas rated').addClass("far");
  
  
            //Save your rate
            //refresh public rate
});