Edit in JSFiddle

$("#articleRating > .rating").rateYo({
  rating: 3.6,
  starWidth: '25px',
  normalFill: '#d7d7d7', // light gray
  ratedFill: '#28b350',  // green
  readOnly: true
});

$("#articleRating .tooltip .rating").rateYo({
  starWidth: '20px',
  normalFill: '#d7d7d7', // light gray
  ratedFill: 'black',
  fullStar: true
});


// TO-DOs
// JS - Color the button green if the tooltip is mouseovered
// CSS - Add the correct font-families
// JS - GET request for the article ratings and set the first rating as such
// JS - click listener to the button that adds `active` to itself and the tooltip to keep it open and the button highlighted
// JS - Add on rating set listener to the user's rateYo
// JS - Fire POST request on set listener trigger
// JS - Remove the button and tooltip when POST is done
// HTML - Wrap button and tooltip in a section tag that can get the single `active` class to apply to both (maybe?)
<div class="container">

<div id="articleRating">
  <div class="rating"></div>
  <div class="count">
    <span class="number">0</span>
    <span>Ratings</span>
  </div>
  <button>Rate This</button>
  <br>
  <div class="tooltip-container">
    <div class="tooltip">
      <div class="rating"></div>
    </div>
  </div>
</div>

<h1>Headline</h1>
<h2>Subheadline</h2>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
.container{
  position: relative;
  width: 75%;
  margin: 0 auto;
  padding: 20px;
  background-color: white;
}

$green: #28b350;
$gray-light: #d7d7d7;

.clearfix:after,
.clearfix:before {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}



#articleRating{
  position: absolute;
  top: 0;
  right: 0;
  padding: 20px;
  text-align: right;
  
  // Article's Rating > Read-Only Stars
  > .rating{
    margin-bottom: 5px;
  }
  
  // Article's Rating > Small Typography
  .count,
  button{
    font-size: 13px;
    line-height: 1;
    text-transform: uppercase;
  }
  
  // Article's Rating > Quantity of Ratings
  .count{
    display: block;
    margin-bottom: 10px;
    color: $gray-light;
  }
  
  // Article's Rating > "Rate This" Button
  button{
    display: block;
    float: right;
    padding: 6px 10px;
    border: none;
    background-color: black;
    color: white;
    transition: background-color 0.25s ease;
    
    &:hover,
    &.active{
      cursor: pointer;
      background-color: $green;
    }
    
    &:hover ~ .tooltip-container{
      height: 26px;
      margin: 0 -6px -6px -6px;
      padding: 7px 6px 6px 6px;
    }
  }
  
  .tooltip-container{
    overflow: hidden;
    position: relative;
    float: right;
    height: 0;
    
    &:hover,
    &.active{
      height: 26px;
      margin: 0 -6px -6px -6px;
      padding: 7px 6px 6px 6px;
    }
    
    .tooltip{
      position: relative;
      padding: 5px;
      box-shadow: 0 0 6px 0 rgba(black, 0.25);
      background-color: white;
      
      &:before,
      &:after{
        z-index: 0;
        content: '';
        display: block;
        position: absolute;
        height: 10px;
      }

      &:before{
        top: -5px;
        right: 10px;
        width: 10px;
        transform: rotate(45deg);
        background-color: white;
        box-shadow: 0 0 6px 0 rgba(black, 0.25);
      }

      &:after{
        top: 0;
        right: 5px;
        width: 20px;
        background-color: white;
      }
    }
    
    .rating{
      padding: 0;
    }
  }
}