Fares Popup2

by freedawirl

HTML

<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="ui-widget faresLink">
  <div class="ui-widget-header ui-corner-all">
   <a id="local" class="pass-link" href="#"></a>
  </div>

</div>


<div class="ui-widget faresLink">
  <div class="ui-widget-header ui-corner-all">
   <a id="premium" class="pass-link" href="#"></a>
  </div>
</div>


<div class="ui-widget faresLink">
  <div class="ui-widget-header ui-corner-all">
   <a id="commuter" class="pass-link" href="#"></a>
  </div>

</div>

CSS

.ui-tooltip {
    padding: 10px 20px;
    color: black;
    border-radius: 20px;
    font:"Helvetica Neue", Sans-Serif;

    box-shadow: 0 0 7px black;
  }
  
.ui-tooltip h4{font-size:18px}
.ui-tooltip p{font-size:14px}
.faresLink {
    width: 40px;
    text-align: center;
  }
  .photo .ui-widget-header {
    margin: 1em 0;
  }
 
a.pass-link{ width: 40px; height:179px; display:block; cursor:pointer}

.ui-widget-header a#local { background:url(http://stage.capmetro.org/uploadedImages/Capmetroorg/Riders_Guide/Paying_the_Fare/pass-link-sprite.png) #004a97 0 0}

.ui-widget-header a#premium { background:url(http://stage.capmetro.org/uploadedImages/Capmetroorg/Riders_Guide/Paying_the_Fare/pass-link-sprite.png) #777779 -45px 0}

.ui-widget-header a#commuter { background:url(http://stage.capmetro.org/uploadedImages/Capmetroorg/Riders_Guide/Paying_the_Fare/pass-link-sprite.png) #e2231a -85px 0}

JavaScript

$(function() {
    $( document ).tooltip({
         show: null,
      position: {
        my: "left top",
        at: "right middle"
      },
        
        
      items: "#local,#premium,#commuter",
      content: function() {
        var element = $(this);
          
        if ( element.is( "#local" ) ) {
          var text = element.text();
          return "<h3>Local Service</h3> <p> Local routes serve the most diverse area of neighborhoods with frequent stops. Local passes allow access to:</p><ul><li>MetroBus routes 1-99, 200-490</li><li>UT shuttle routes 600-690</li></ul>";
        }
             if ( element.is( "#premium" ) ) {
          var text = element.text();
          return "<h3>Premium Service</h3> <p> Premium service routes have fewer stops to get you to further destinations faster. Premium passes allow access to:</p><ul><li>MetroRapid</li><li>Flyer routes 100-199</li><li>Plus all Local service</li></ul>";
        }
             if ( element.is( "#commuter" ) ) {
          var text = element.text();
          return "<h3>Commuter Service</h3> <p> Commuter routes extend beyond the metropolitan area and are good choices for people who live in suburban communities but work in the city. Commuter passes allow access to:</p><ul><li>Bullet item</li><li>Bullet item</li><li>Bullet item</li></ul>";
        }
       
      }
    });
  });