Fares Popup

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="#" data-geo=""></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;
  }
  .map {
    width: 450px;
    height: 350px;
  }
  .ui-tooltip {
    max-width: 350px;
  }


a.pass-link{ width: 40px; height:179px; display:block; cursor:pointer}

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

JavaScript

$(function() {
    $( document ).tooltip({
         show: null,
      position: {
        my: "left top",
        at: "right middle"
      },
        
        
      items: "[data-geo]",
      content: function() {
        var element = $(this);
        if ( element.is( "[data-geo]" ) ) {
          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>";
        }
       
      }
    });
  });