Используйте data- * attribute как подсказку для jQuery UI

Question

Я не уверен, что я здесь делаю неправильно. Я хочу использовать атрибут data-* в качестве содержимого для всплывающей подсказки JQuery UI.

Я посмотрел на нескольких примерах в этом ответы:

• JQuery UI Tooltip with data attributes
• jQuery Tooltip that doesn't use the <title> attribute

, но я не могу заставить его работать правильно ...

Вот мой код:

FIDDLE:http://jsfiddle.net/P2XhC/

HTML

<div id="div_1">number 1</div> 
<div id="div_2">number 2</div> 
<div id="div_3">number 3</div> 

<button id="btn_class">STEP 1: Add class to 1 and 3</button> 
<button id="btn_tooltip">STEP 2: Add tooltip to class</button> 
<button id="btn_check">STEP 3: Check for data</button> 

JS

$("#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"); 
    }); 
}); 

CSS

.tooltip 
{ 
    color: red; 
} 

Answer 1

У меня есть ваш чувак. В вашем коде this ссылался на нажатый div, а не на подсказки.

В этой исправленной jsfiddle, я итерация каждой подсказке, так что this будет относиться к текущей подсказке: http://jsfiddle.net/P2XhC/1/

$("#btn_tooltip").click(function() 
{ 
    $(".tooltip").each(function() { 
     $(this).tooltip({ 
      content: $(this).data("text"), 
      //content: "show something...", 
      items: '*' 
     }) 
    }); 
}); 

Answer 2

EDIT:

В этом контексте:

.. 
content: $(this).data("text"), 
.. 

«это» на самом деле «#btn_tooltip», изменяя его в функцию, возвращающую значение, которое нужно будет изменить «это» будет то, что ваш

$("#btn_class").click(function() 
{ 
    $("#div_1, #div_3").addClass("tooltip").data("text", "show this!"); 
}); 

$("#btn_tooltip").click(function() 
{ 
    $(".tooltip").tooltip({ 
     content: function() { return $(this).data("text"); }, 
     //content: "show something...", 
     items: '*' 
    }); 
}); 

Answer 3

Использование JQuery .each() итерации по каждой подсказке, так что this будет относиться к текущая всплывающая подсказка. Попробуйте это:

$("#btn_tooltip").click(function() 
{ 
    $(".tooltip").each(function() { 
      $(this).tooltip({ 
       content: $(this).data('text'), 
       items: '*' 
      }); 
     }); 
}); 

DEMO