使用data-*属性作为jQuery UI的工具提示

我不确定我做错了什么。我想使用一些

data-*

属性作为jQuery UI工具提示的内容

我看了以下几个例子：

但我不能让它正常工作

这是我的密码：

小提琴：

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

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>

CSS

.tooltip
{
    color: red;
}

编辑：

在这方面：

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

“this”实际上是“#btn_工具提示”，将其更改为返回所需值的函数将使“this”成为您所需的：

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

编辑：

在这方面：

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

“this”实际上是“#btn_工具提示”，将其更改为返回所需值的函数将使“this”成为您所需的：

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

---

我支持你，伙计。在您的代码中，

这是指单击的div，而不是工具提示

在这个修改后的JSFIDLE中，我对每个工具提示进行了迭代，以便
此
将引用当前工具提示：

我支持你，伙计。在您的代码中，
这是指单击的div，而不是工具提示

在这个修改后的JSFIDLE中，我对每个工具提示进行了迭代，以便
此
将引用当前工具提示：

使用jQuery迭代每个工具提示，以便
此
将引用当前工具提示。试试这个：

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

使用jQuery迭代每个工具提示，以便
此
将引用当前工具提示。试试这个：

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

我将鼠标悬停在工具提示上时会看到它们。这里怎么了？@swajak这是一个硬编码的内容，请删除上面一行中的注释，以便将数据属性用作文本。当我将鼠标悬停在工具提示上时，我会看到它们。这里出了什么问题？@swajak这是一个harcoded内容，删除上面一行中的注释以便将数据属性用作text我怎么会错过它！非常感谢你！我怎么会错过那个！非常感谢你！糟糕的是，我以为您使用的是较旧版本的jQuery，而我在代码中的错误使它正常工作。我将编辑我的回答我的错，我以为你使用的是较旧版本的jQuery，我的代码错误使它工作了。我会修改我的回答，比你快一分钟！对不起，兄弟。无论如何，投一票吧，赢你一分钟！对不起，兄弟。不管怎样，都要投赞成票。