Используйте атрибут data- * в качестве всплывающей подсказки для jQuery UI

0

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

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

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

Вот мой код:

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;
}
  • 0
    Я вижу всплывающие подсказки при наведении на них курсора. Что здесь не так?
  • 0
    @swajak Это зашифрованный контент, удалите комментарий из строки выше, чтобы использовать атрибут данных в качестве текста
Теги:
jquery-ui-tooltip

3 ответа

2
Лучший ответ

Я забрал твоего парня. В вашем коде 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: '*'
        })
    });
});
Поделиться
  • 1
    Как я это пропустил! Большое спасибо!
1

РЕДАКТИРОВАТЬ:

В данном контексте:

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

'this' на самом деле '#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: '*'
    });
});
Поделиться
  • 0
    Посмотрите на этот api.jquery.com/data
  • 0
    Плохо, я думал, что вы используете более старую версию jQuery, и моя ошибка в коде заставила его работать. Я отредактирую свой ответ
1

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

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

DEMO

Поделиться
  • 0
    бить тебя на минуту! Извини брат. В любом случае имейте upvote.
  • 1
    @swajak: нет проблем, брат. Здесь учиться и внести свой вклад :)

Ещё вопросы

Сообщество Overcoder
Наверх
Меню