Use data-* attribute as tooltip for jQuery UI -

I'm not sure what I'm doing wrong here I got jQuery UI Tooltip for some I want to use the data - * attribute.

I have seen many examples in this answer:

• But I work it properly I can not ...

  Here's my code:

  FIDDLE:

  HTML < / P>

    & 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 1 and 3 & lt; / Button & gt; & Lt; Button id = "btn_tooltip" & gt; STEP 2: Add Tooltip in Class & lt; / Button & gt; & Lt; Button ID = "BTN_Check" & gt; STEP 3: Examine data & lt; / Button & gt; Click "$" ("# div_1", "DivX"). AddClass ("Tooltip"). Data ("Text", "Show It!" );}); Click $ ("# Btn_tooltip") (function () {$ (". Tooltip"). Tooltip ({// content: $ (this) .data ("text"), // This content does not work: "Show something ...", // it works! Item: '*'});}); Click on $ ("# Btn_check") (function () {$ ("div"). (Function () {console.log ($ (this) .attr ("id") + "=" + $ ( This is.) Data ("text");});});   
    CSS   
    .tooltip {color: Red;}    
   
   
   I have found your last friend. In your code,  the clicked div, not the tooltips.  
   In this correct JSD, I am running on each tooltip so that  this  current tooltip Refer to ($ (". Tooltip"). Each (function () {$ (this) .tooltip ({content: $}   
    $ ("# btn_tooltip"). (This) .data ("text") , // content: "Show something ...", item: '*'})}});});