title: Display message on hover using CSS next to Star Rater unordered list
body: <p>I am trying to show a unique message to the right of my star rater when each star is hovered over. I messed around with tooltips but they would follow the mouse, I want my message to be fixed. I tried looking at Yelp's code which looks like they are using CSS. I am hoping for a simple CSS solution, rather than using JavaScript or JQuery. If anyone has a solution or pointer I would appreciate it. Thanks.</p>
  
  <p>Here is my code: </p>
  
  <pre><code>&lt;ul class="star-rating"&gt;
  &lt;li class="current-rating" style="width:'.$average_rating.';"&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="1" class="one-star tooltip" onclick="updateStarRating(this.title)"&gt;1&lt;/a&gt;
  &lt;p class="message"&gt;Terrible!&lt;/p&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="2" class="two-stars tooltip" onclick="updateStarRating(this.title)"&gt;2&lt;/a&gt;
  &lt;p class="message"&gt;Not good!&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="3" class="three-stars" onclick="updateStarRating(this.title)"&gt;3&lt;/a&gt;
  &lt;p class="message"&gt;Pretty good.&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="4" class="four-stars" onclick="updateStarRating(this.title)"&gt;4&lt;/a&gt;
  &lt;p class="message"&gt;Almost perfect!&lt;/p&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" title="5" class="five-stars" onclick="updateStarRating(this.title)"&gt;5&lt;/a&gt;
  &lt;p class="message"&gt;Perfect!&lt;/p&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  .star-rating ul li div{display:none; background:white; opacity:.5; position:absolute;}
  
  .star-rating,
  .star-rating a:hover,
  .star-rating a:active,
  .star-rating a:focus,
  .star-rating .current-rating{
  background: url(../images/star_01_white.png) left -1000px repeat-x;
  }
  .star-rating{
  position:relative;
  width:110px;
  height:19px;
  overflow:hidden;
  list-style:none;
  margin:0;
  padding:0;
  background-position: left top;
  }
  .star-rating li{
  display: inline;
  }
  .star-rating a, 
  .star-rating .current-rating{
  position:absolute;
  top:0;
  left:0;
  text-indent:-1000em;
  height:19px;
  line-height:19px;
  outline:none;
  overflow:hidden;
  border: none;
  }
  .star-rating a:hover,
  .star-rating a:active,
  .star-rating a:focus{
      background-position: left bottom;
  }
  .star-rating a.one-star{
      width:20%;
      z-index:6;
  }
  .star-rating a.two-stars{
      width:40%;
      z-index:5;
  }
  .star-rating a.three-stars{
      width:60%;
      z-index:4;
  }
  .star-rating a.four-stars{
      width:80%;
      z-index:3;
  }
  .star-rating a.five-stars{
      width:100%;
      z-index:2;
  }
  .star-rating .current-rating{
      z-index:1;
      background-position: left center;
  }   
  </code></pre>