0

我在使用带有 jQ​​uery 的 qTip 插件时遇到问题。我创建了一个 js fiddle 来看看它在做什么。我不确定如何解决这个问题（链接在问题描述之后）

所以我有一份清单。你会看到三个<tr>，每个都有一个工具提示。如果任务未完成，工具提示会显示“任务未完成”。如果任务完成，工具提示会显示“任务完成”。

当您单击“切换”时，它应该更改<span>淡入<tr>/淡出并切换类并将工具提示从“完成”更改为“未完成”，反之亦然。

其他一切似乎都正常工作。它改变了类，淡入/淡出，甚至改变了标题属性。

问题是 qTip 插件仅将单元格中的工具提示直接更改为切换右侧。它不会更改以下两个单元格中的工具提示。

一切似乎都是为了让它正常工作。有什么想法吗？这真让我抓狂！！

JS小提琴

4

1 回答 1

1

两种可能：

1）代替

.attr('title', 'This task is not yet complete.');

采用

.qtip('option', {'content.text': 'This task is not yet complete.'});

qTip 在初始化时实际上复制了title属性（它不绑定到它），所以为了改变 qTip 你需要通过qTip 方法来改变它。

2)将 qTip 的内容设置为 jQuery 对象。例如，将data-qtip属性添加到您的标题元素，这将是（例如）qtip 内容容器的 id（为每个 qtip 添加额外的 div）：

$('[data-qtip]').each(function() {
    var q = $(this).attr('data-qtip');
    var content = $('#'+q);

    $(this).qtip({
        content: content, // here we reference the jQuery object
        position: {
            my: 'bottom center',
            at: 'top center'
        },
        style: { classes: 'ui-tooltip-dark ui-tooltip-rounded' }
    }
});

现在改变 div 的内容会改变 qtip（因为这实际上是一个绑定）。

我个人认为第二种解决方案更好。它使您可以很好地控制 qTip，并且当我处理动态工具提示（例如带有交互式图表的工具提示）时，它对我来说非常有效。

于 2012-04-06T22:44:57.987 回答