docs(fabSpeedDial): add demo showing tooltip usage

users have difficulty utilizing tooltips without an example

references #3338, references #3277, references #3236

src/components/fabSpeedDial/demoBasicUsage/index.html

@@ -21,7 +21,7 @@
           <md-button aria-label="facebook" class="md-fab md-raised md-mini">
             <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
           </md-button>
-          <md-button aria-label="Google hangout" class="md-fab md-raised md-mini">
+          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
             <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
           </md-button>
         </md-fab-actions>

src/components/fabSpeedDial/demoTooltips/index.html

@@ -0,0 +1,35 @@
+<div ng-controller="AppCtrl" layout="column">
+  <md-content class="md-padding" layout="column">
+    <p>
+      You may add tooltips to both the trigger and actions.
+    </p>
+
+    <div class="lock-size" layout="row" layout-align="center center">
+      <md-fab-speed-dial md-direction="down" class="md-fling">
+        <md-fab-trigger>
+          <md-button aria-label="menu" class="md-fab md-warn">
+            <md-tooltip md-direction="top">Menu</md-tooltip>
+            <md-icon md-svg-src="img/icons/menu.svg"></md-icon>
+          </md-button>
+        </md-fab-trigger>
+
+        <md-fab-actions>
+          <md-button aria-label="twitter" class="md-fab md-raised md-mini">
+            <md-tooltip md-direction="left">Twitter</md-tooltip>
+            <md-icon md-svg-src="img/icons/twitter.svg"></md-icon>
+          </md-button>
+
+          <md-button aria-label="facebook" class="md-fab md-raised md-mini">
+            <md-tooltip md-direction="right">Facebook</md-tooltip>
+            <md-icon md-svg-src="img/icons/facebook.svg"></md-icon>
+          </md-button>
+
+          <md-button aria-label="Google Hangout" class="md-fab md-raised md-mini">
+            <md-tooltip md-direction="left">Google Hangout</md-tooltip>
+            <md-icon md-svg-src="img/icons/hangout.svg"></md-icon>
+          </md-button>
+        </md-fab-actions>
+      </md-fab-speed-dial>
+    </div>
+  </md-content>
+</div>

src/components/fabSpeedDial/demoTooltips/script.js

@@ -0,0 +1,9 @@
+(function() {
+  'use strict';
+
+  angular.module('fabSpeedDialTooltipDemo', ['ngMaterial'])
+    .controller('AppCtrl', function($scope) {
+      $scope.demo = {
+      };
+    });
+})();

src/components/fabSpeedDial/demoTooltips/style.scss

@@ -0,0 +1,20 @@
+.text-capitalize {
+  text-transform: capitalize;
+}
+
+.md-fab:hover, .md-fab.md-focused {
+  background-color: #000 !important;
+}
+
+p.note {
+  font-size: 1.2rem;
+}
+
+.lock-size {
+  min-width: 300px;
+  min-height: 300px;
+  width: 300px;
+  height: 300px;
+  margin-left: auto;
+  margin-right: auto;
+}