Add the data-mdl-for attribute to tooltips.

src/tooltip/README.md

@@ -10,7 +10,7 @@ Tooltips are a ubiquitous feature of most user interfaces, regardless of a site'
 ```html
 <p id="tt1">HTML</p>
 ```
-&nbsp;2. Following the target element, code a second element, such as a `<div>`, `<p>`, or `<span>`; this will be the tooltip itself. Include a `for` attribute whose value matches that of the target's `id`.
+&nbsp;2. Following the target element, code a second element, such as a `<div>`, `<p>`, or `<span>`; this will be the tooltip itself. Include a `for` (or `data-mdl-for`) attribute whose value matches that of the target's `id`.
 ```html
 <p id="tt1">HTML</p>
 <span for="tt1">HyperText Markup Language</span>

src/tooltip/snippets/tooltip-rich.html

@@ -1,5 +1,5 @@
 <!-- Rich Tooltip -->
 <div id="tt3" class="icon material-icons">cloud_upload</div>
-<div class="mdl-tooltip" for="tt3">
+<div class="mdl-tooltip" data-mdl-for="tt3">
 Upload <strong>file.zip</strong>
 </div>

src/tooltip/snippets/tooltip-simple.html

@@ -1,5 +1,5 @@
 <!-- Simple Tooltip -->
 <div id="tt1" class="icon material-icons">add</div>
-<div class="mdl-tooltip" for="tt1">
+<div class="mdl-tooltip" data-mdl-for="tt1">
 Follow
 </div>

src/tooltip/tooltip.js

@@ -120,7 +120,8 @@
   MaterialTooltip.prototype.init = function() {
 
     if (this.element_) {
-      var forElId = this.element_.getAttribute('for');
+      var forElId = this.element_.getAttribute('for') ||
+          this.element_.getAttribute('data-mdl-for');
 
       if (forElId) {
         this.forElement_ = document.getElementById(forElId);