From 36896a585bc9b903473bb5cbf9e3e506626d5528 Mon Sep 17 00:00:00 2001
From: Kevin Ross <kevin.ross@alienfast.com>
Date: Fri, 6 Nov 2015 10:34:41 -0600
Subject: [PATCH] Standardized hints while providing backwards compatibility on
 data-hint

---
 index.html          |  2 +-
 scripts/material.js | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index ba831908..e54d71aa 100644
--- a/index.html
+++ b/index.html
@@ -506,7 +506,7 @@
             </div>
 
             <div class="form-group">
-              <input type="text" class="form-control floating-label" placeholder="old floating label" data-hint="old hint attribute">
+              <input type="text" class="form-control floating-label" placeholder="old floating label" data-hint="This is a hint using a <code>data-hint</code> attribute on the input">
             </div>
 
             <h2>Textarea</h2>
diff --git a/scripts/material.js b/scripts/material.js
index e7ca001b..e7455fe7 100644
--- a/scripts/material.js
+++ b/scripts/material.js
@@ -78,9 +78,9 @@
           console.error("Expected form-group for input", $this);
         }
 
-        if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
-          return;
-        }
+        //if (!$this.attr("data-hint") && !$this.hasClass("floating-label")) {
+        //  return;
+        //}
 
         $this.after("<span class=material-input></span>");
 
@@ -91,9 +91,10 @@
           $this.after("<div class=floating-label>" + placeholder + "</div>");
         }
 
-        // Add hint label if required
+
+        // Add hint label if using the shorthand data-hint attribute on the input
         if ($this.attr("data-hint")) {
-          $this.after("<div class=hint>" + $this.attr("data-hint") + "</div>");
+          $this.after("<p class='help-block hint'>" + $this.attr("data-hint") + "</p>");
         }
 
         // Set as empty if is empty (damn I must improve this...)