根据元素的类别显示工具提示文本

Question

我在类“ tooltipX”的span元素内包裹了一些单词，其中“ X”是一个数字。 数字随数组“ Data”一起增长，该数组包含工具提示的描述。 如何显示正确元素的描述？ 我希望使用类似下面的代码，但是我不知道如何循环它。

$( document ).tooltip({
items: ".tooltip"+X+"",
content: Data[X].desc
});

的jsfiddle

Answer 1

您可以扩大类别并选择所有类别，而不是使用特定的类别。 另外，使用data-*属性存储要用于工具提示的Data的索引。 因此，更改您的HTML以遵循以下步骤：

<span class="tooltip" data-tooltip-index="0">

（显然更改每个跨度的data-tooltip-index值）

另外，您可以传递函数 ，而不是将字符串传递给content ，而是让它动态返回所需Data中的特定项目。 每当需要显示工具提示时，就会执行此函数，并将返回值用作其内容。 在此函数中，您将获得元素的data-tooltip-index值（使用this ），并从Data获得相应的数组值。 因此，将您的JavaScript更改为此：

$(document).tooltip({
    items: ".tooltip",
    content: function () {
        var index = $(this).attr("data-tooltip-index");
        return Data[index].desc;
    }
});

DEMO

---

参考文献：

• 工具提示content选项
• data-*属性
• jQuery.attr