Merge PR #66 from @alexkolson.

Author: Alex Olson

index.html

@@ -6,6 +6,7 @@
         <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>   
         <link rel="stylesheet" href="style/jquery.mobile-1.4.0.css" />
         <link rel="stylesheet" href="style/jquery.mobile.icons-1.4.0.min.css" />
+        <link rel="stylesheet" href="style/tooltipster.css" />
         <link rel="stylesheet" href="style/app.css" />
         <script data-main="js/app" src="js/vendor/require.js"></script>
     </head>

js/app.js

@@ -5,6 +5,7 @@ require.config({
         "jquery": "vendor/jquery-1.11.0.min",
         "jquerymobile": "vendor/jquery.mobile-1.4.0.min",
         "jquerymobileconfig": "vendor/jquery.mobile.config",
+        "tooltipster": "vendor/jquery.tooltipster.min",
         "cloudos": "vendor/CloudOS",
         "cloudosconfig": "vendor/CloudOS.config",
         "underscore": "vendor/underscore-min",
@@ -22,6 +23,7 @@ require.config({
         },
         "jquerymobileconfig": ["jquery"],
         "jquerymobile": ["jquery", "jquerymobileconfig"],
+        "tooltipster": ["jquery"],
         "cloudosconfig": ["jquery"],
         "cloudos": {
             deps: ["jquery", "cloudosconfig"],

js/fuse.js

@@ -240,6 +240,16 @@ define(["backbone", "jquery", "underscore", "vendor/google.maps", "text!template
             });
         },
 
+        initTooltips: function() {
+            // this is somewhat of a hack until I can finish a stable
+            // patch of the tooltipster() plugin which allows 
+            // for adding tooltipster functionality to dynamically-added
+            // elements.
+            $(document).on("mouseenter", "[title]", function() {
+                $(this).tooltipster();
+            });
+        },
+
         preventGhostTaps: function() {
             $(document).on("tap", function(e) {
                 if (e.handled) {
@@ -256,6 +266,8 @@ define(["backbone", "jquery", "underscore", "vendor/google.maps", "text!template
             this.initMenu();
             // add reusable map container to page.
             this.initMap();
+            // inialize tooltip plugin.
+            this.initTooltips();
             // prevent ghost taps.
             this.preventGhostTaps();
             // tell Backbone to start listening for hashchanges.

js/main.js

@@ -1,4 +1,4 @@
-require(["fuse", "cloudos", "jquery", "routers/app.router", "routers/vehicles.router", "jquerymobile"], function(Fuse, CloudOS, $, AppRouter, VehiclesRouter) {
+require(["fuse", "cloudos", "jquery", "routers/app.router", "routers/vehicles.router", "jquerymobile", "tooltipster"], function(Fuse, CloudOS, $, AppRouter, VehiclesRouter) {
 	// setup the routers
 	Fuse.routers = {};
 	Fuse.routers.AppRouter = new AppRouter();

js/templates/footerTmpl.html

@@ -1,3 +1,7 @@
-<div class="fuse-footer" data-role="footer" data-position="fixed">
-	<h1>Icons coming soon...</h1>
+<div class="fuse-footer ui-grid-b ui-bar" data-role="footer" data-position="fixed">
+	<div class="fuse-footer-container ui-grid-b center-text">
+		<a class="tooltip ui-block-a" data-action="trips"><img src="style/images/trip_small.png" title="view your trips"></a>
+		<a class="tooltip ui-block-b" data-action="find-car"><img src="style/images/findcar_small.png" title="find your car"></a>
+		<a class="tooltip ui-block-c" data-action="maintenance"><img src="style/images/maintenance_small.png" title="check maintenance schedule"></a>
+	</div>
 </div>

js/vendor/jquery.tooltipster.min.js

@@ -1,3 +1,10 @@
 .center-text {
 	text-align: center;
+}
+
+.fuse-footer {
+	padding: 10px;
+}
+.fuse-footer img {
+	vertical-align: middle;
 }