Use data-* attribute as tooltip for jQuery UI

Question

I'm not sure what I'm doing wrong here. I want to use some data-* attribute as content for jQuery UI tooltip.

I've look at several examples in this answers:

but I can't make it work properly...

Here's my code:

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;
}

@swajak That's a harcoded content, remove comment from the line above in order to use the data attribute as text — Matías Cánepa
– Matías Cánepa, Commented Apr 26, 2014 at 0:51

swajak · Accepted Answer · 2014-04-26 01:03:52Z

2

I got your back dude. In your code, this was referring to the clicked div, not the tooltips.

In this corrected jsfiddle, I'm iterating over each tooltip, so that this will refer to the current tooltip: http://jsfiddle.net/P2XhC/1/

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

answered Apr 26, 2014 at 1:03

swajak

2,7093 gold badges21 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matías Cánepa Over a year ago

How did I missed that! Thank you very much!

Kiran · Accepted Answer · 2014-04-26 01:04:53Z

1

Use jQuery .each() to iterate over each tooltip, so that this will refer to current tooltip. Try this:

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

DEMO

answered Apr 26, 2014 at 1:04

Kiran

20.3k11 gold badges72 silver badges101 bronze badges

1 Comment

swajak Over a year ago

beat you by a minute! sorry bro. Have an upvote anyways.

mambrow · Accepted Answer · 2014-04-26 01:12:30Z

1

EDIT:

In this context:

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

'this' is actually '#btn_tooltip', changing it to a function returning the value you need will change the 'this' to be what your looking for:

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

edited Apr 26, 2014 at 1:12

answered Apr 26, 2014 at 0:52

mambrow

4755 silver badges14 bronze badges

1 Comment

mambrow Over a year ago

My bad, I thought you were using an older version of jQuery and my error in code made it work. I'll edit my answer

Collectives™ on Stack Overflow

Use data-* attribute as tooltip for jQuery UI

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related