Fares Popup3

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">
<table class="fares-table" id="local">
    <tbody>
        <tr class="even">
            <td class="service commuter-fares-link" rowspan="8">
                <div class="NinetydegText">Commuter</div>
                <div class="ui-widget faresLink">
                    <div class="ui-widget-header ui-corner-all"> <a id="commuterLink" class="pass-link" href="#"></a> 
                    </div>
                </div>
            </td>
            <td class="tbl-col-1">Single Ride</td>
            <td>$1.25</td>
        </tr>
    </tbody>
</table>

CSS

.fares-table {
    border-collapse:collapse;
    margin-bottom:30px;
    width:357px;
}
.fares-table .even td {
    background:#f5f5f5;
}
.fares-table .odd td {
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}
.fares-table td {
    padding:0px 15px;
    font-size: 16px;
    font-weight: 100;
    font-family:'Droid Sans', sans-serif;
}
.fares-table td.service {
    padding:0;
    width: 41px;
}
.intro-wrap {
    background: #f5f5f5;
    padding: 20px;
    margin-bottom: 40px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}
.intro-wrap img {
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    width: 343px;
}
.intro-blurb {
}
.intro-blurb p {
    font-size: 21px;
    line-height: 1.4;
    color: #444;
    margin: 0;
    padding: 0 0 0 20px !important;
    font-weight: 600;
}
div#serviceDetails .content-row {
    margin-bottom: 22px;
}
div#serviceDetails {
    margin: 0 0 0 30px;
    border-left: 1px solid #dedede;
}
div#serviceDetails h3 {
    padding: 0 0 0 10px;
    margin:0;
}
div#serviceDetails p {
    font-size: 16px;
    font-weight: 100;
}
div#serviceTypes {
    padding: 0 30px 0 0;
}
.ui-tooltip {
    padding:15px !important;
    color: #444444 !important;
    border-radius: 20px !important;
    border:none !important;
    border: 12px solid rgba(0, 0, 0, 0.1) !important;
    /*box-shadow: 0 0 7px rgba(0,0,0,0.9) !important;*/
    font-family:'Droid Sans', sans-serif;
    font-weight: 100;
}
.content-row hr {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 0;
    border-top: 1px solid #eee;
}
.ui-tooltip h4 {
    font-size:18px;
    margin:0 0 5px 0;
}
.ui-tooltip p, .ui-tooltip li {
    font-size:14px
}
.faresLink {
    width: 41px;
    height:179px;
    text-align: center;
    position: relative;
}
.tbl-col-1 {
    border-right:1px solid #dedede
}
.local-fares-link {
    background:url(/uploadedImages/Capmetroorg/Riders_Guide/Paying_the_Fare/pass-link-sprite.png) #004a97 0 0...

JavaScript

//ToolTips for Service items
$(function () {
    $(document).tooltip({
        show: null,
        position: {
            my: "left top",
            at: "right middle"
        },


        items: "#localLink,#premiumLink,#commuterLink",
        content: function () {
            var element = $(this);

            if (element.is("#localLink")) {
                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("#premiumLink")) {
                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("#commuterLink")) {
                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>MetroRail</li><li>MetroExpress routes 900-990</li><li>Plus all Local and Premium service</li></ul>";

            }

        }
    });
});