title: Use data-* attribute as tooltip for jQuery UI
body: <p>I'm not sure what I'm doing wrong here. I want to use some <code>data-*</code> attribute as content for jQuery UI tooltip.</p>
  
  <p>I've look at several examples in this answers:</p>
  
  <ul>
  <li><a href="https://stackoverflow.com/questions/17495452/jquery-ui-tooltip-with-data-attributes">JQuery UI Tooltip with data attributes</a></li>
  <li><a href="https://stackoverflow.com/questions/17039030/jquery-tooltip-that-doesnt-use-the-title-attribute">jQuery Tooltip that doesn&#39;t use the &lt;title&gt; attribute</a></li>
  </ul>
  
  <p>but I can't make it work properly...</p>
  
  <p>Here's my code:</p>
  
  <p><strong>FIDDLE:</strong> <a href="http://jsfiddle.net/P2XhC/" rel="nofollow noreferrer">http://jsfiddle.net/P2XhC/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="div_1"&gt;number 1&lt;/div&gt;
  &lt;div id="div_2"&gt;number 2&lt;/div&gt;
  &lt;div id="div_3"&gt;number 3&lt;/div&gt;
  
  &lt;button id="btn_class"&gt;STEP 1: Add class to 1 and 3&lt;/button&gt;
  &lt;button id="btn_tooltip"&gt;STEP 2: Add tooltip to class&lt;/button&gt;
  &lt;button id="btn_check"&gt;STEP 3: Check for data&lt;/button&gt;
  </code></pre>
  
  <p><strong>JS</strong> </p>
  
  <pre><code>$("#btn_class").click(function()
  {
      $("#div_1, #div_3").addClass("tooltip").data("text", "show this!");
  });
  
  $("#btn_tooltip").click(function()
  {
      $(".tooltip").tooltip({
          //content: $(this).data("text"), //this doesn't work
          content: "show something...", //this works!
          items: '*'
      });
  });
  
  $("#btn_check").click(function()
  {
      $("div").each(function()
      {
          console.log($(this).attr("id") + " = " + $(this).data("text");
      });
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.tooltip
  {
      color: red;
  }
  </code></pre>