ed-tooltip.html

<style>
.wax-tooltip {
  font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #404040;
  height: auto;
  background: #fff;
  border: 1px solid #8C8C8C;
  border: 1px solid rgba(0, 0, 0, .45);
  -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
  box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
  width: 200px;
  z-index: 1000;
  }
  .wax-tooltip .inner {
    padding: 0 10px;
    }
  .wax-tooltip h4 {
    font-size: 16px;
    font-weight: bold;
    display: block;
    width: 100px;
    float: left;
    margin: 5px 0 10px;
    padding: 0;
    }
  .wax-tooltip span.county {
    display: block;
    position: absolute;
    text-align: right;
    top: 8px;
    right: 0;
    width: 70px;
    line-height: 16px;
    color: gray;
    }
  .wax-tooltip .graduation {
    color: #fff;
    font-weight: 500;
    clear: both;
    padding: 3px 10px;
    margin-bottom: 5px;
    }
    
  .wax-tooltip .graduation.a { background-color: #96629f; }
  .wax-tooltip .graduation.b { background-color: #c26091; }
  .wax-tooltip .graduation.c { background-color: #d9776a; }
  .wax-tooltip .graduation.d { background-color: #d98859; }
  .wax-tooltip .graduation.f { background-color: #dfb046; }
  .wax-tooltip .graduation.nd { background-color: #a4abaf }


  .wax-tooltip span.rate {
    display: block;
    background-repeat: no-repeat;
    font-weight: 600;
    text-align: right;
    float: right;
    font-size: 13px;
    padding-right: 15px;
    background-position: right 5px;
    }
    span.rate.up {
      background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAB9SURBVBiVhc4hCwJhEATQt3KinF0wKpg0CBbB/x8EMdrMYrpkUXQtFw7x87ZsecxMZKaIWGHhzw3af8a1F2Zm4oSmLxEqRAlWEBE1dpiUYKDGHuO+jcsCSry71dMf6IUjHtiiDqwx76AnDpnZtPuH2ARGbf0MN1wy8/5d8QGbfxzs/XliBgAAAABJRU5ErkJggg==');
      }
    span.rate.down {
      background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACTSURBVBiVfdA9akJhEIXhZ64xhmuTlKYQLGyCoJgibsDFC27BBVilCDb+MCnyYS6XLzkwMDMc3jlMYIQ5JjjikJknPQUWmHV2F+wy8xMiYohVYIunHuCGPc54RxtYYto/hSzVwABfeMVDJVbch8wUES02GFfIv8YS+hEfeK4Zm05/LZmqagotsMbLv0a8+Xn4n/oGYsgcDgmXTboAAAAASUVORK5CYII=');
      }
    span.rate.same {
      background-image: url('data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAAgSURBVBiVY2RgYPBlIAIwEaOIJIWM////p7KJDAPmGQDuPAOlniKSnwAAAABJRU5ErkJggg==');
      background-position: right 7px;
      }

  .wax-tooltip h6 {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    display: block;
    padding: 0 10px;
    margin: 0;
    }
  .wax-tooltip small {
    font-size: 11px;
    color: #808080;
    }
  .wax-tooltip ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    }
  .wax-tooltip ul li {
    border-bottom: 1px solid #ddd;
    padding: 0 10px;
    text-transform: uppercase;
    font-size: 11px;
    }
  .wax-tooltip .more {
    background: #849895;
    color: #fff;
    font-weight: bold;
    margin-top: 2px;
    padding: 2px 10px;
    }
</style>
  <h4 class='inner'>{{{schnam}}}</h4>
  <span class='county inner'>{{{leanm}}}</span>
  <div class='data-content'>
    <div class='graduation {{{grade}}}'>Graduation Rate <span class="rate {{{change}}}">{{{pct_gradrate09}}}</span></div>
{{#e12}}    
    <h6>Grade 12</h6>
    <ul>
      <li>Reading <span class='rate {{{change}}}'></span>{{{all_read12_0910}}}</li>
      <li>Math <span class='rate {{{change}}}'></span>{{{all_math12_0910}}}</li>
    </ul>
{{/e12}}
{{#e08}}
    <h6>Grade 8</h6>
    <ul>
      <li>Reading <span class='rate {{{change}}}'>{{{all_read08_0910}}}</span></li>
      <li>Math <span class='rate {{{change}}}'>{{{all_math08_0910}}}</span></li>
    </ul>
{{/e08}}
{{#e04}}    
    <h6>Grade 4</h6>
    <ul>
      <li>Reading <span class='rate {{{change}}}'>{{{all_read04_0910}}}</span></li>
      <li>Math <span class='rate {{{change}}}'>{{{all_math04_0910}}}</span></li>
    </ul>
{{/e04}}
    <small class='inner'>2010 Performance data.</small>
    <div class="more">Click to read more.</div>
  </div>