From eea0555d18e3fa886820af052949ca04fd648fb0 Mon Sep 17 00:00:00 2001
From: Dominik Kroutvar <dominik0711@gmail.com>
Date: Fri, 7 Jul 2017 10:02:35 +0200
Subject: [PATCH] Sample code for labeling paper-fabs

Added an example how to use paper-tooltip to show labels
---
 demo/index.html | 22 ++++++++++++++++++++++
 1 file changed, 22 insertions(+)

diff --git a/demo/index.html b/demo/index.html
index ecc8c1e..b010ee3 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -10,6 +10,7 @@
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../paper-fab/paper-fab.html">
+  <link rel="import" href="../../paper-tooltip/paper-tooltip.html">
   <link rel="import" href="../../iron-icons/iron-icons.html">
 
   <link rel="import" href="../paper-fab-speed-dial.html">
@@ -42,6 +43,27 @@ <h3>Basic paper-fab-speed-dial demo</h3>
     </demo-snippet>
   </div>
 
+  <div class="vertical-section-container centered">
+    <h3>Basic paper-fab-speed-dial demo with labels</h3>
+    <demo-snippet>
+      <template>
+        <div class="screen">
+          <paper-fab-speed-dial>
+            <paper-fab icon="add"></paper-fab>
+            <div class="dropdown-content">
+              <paper-fab mini id="row" icon="rowing"></paper-fab>
+              <paper-fab mini id="week" icon="weekend"></paper-fab>
+              <paper-fab mini id="pet" icon="pets"></paper-fab>
+            </div>
+          </paper-fab-speed-dial>
+          <paper-tooltip for="row" position="left">Rowing is fun</paper-tooltip>
+          <paper-tooltip for="week" position="left">Chill out at weekends</paper-tooltip>
+          <paper-tooltip for="pet" position="top">Hungry pets</paper-tooltip>
+        </div>
+      </template>
+    </demo-snippet>
+  </div>
+
   <div class="vertical-section-container centered">
     <h3>Custom style</h3>
     <demo-snippet>