Question

我在使用jQuery的qTip插件时遇到了问题。我创造了一个js小提琴，看看它在做什么。我不确定如何解决这个问题（链接是在问题描述之后）

所以我有一张清单。你会在每个上面看到三个<tr> w / a工具提示。如果未完成任务，则工具提示“任务未完成”。如果任务完成，工具提示会显示“任务完成”。

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

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

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

一切似乎都是为了让它正常运作。有什么想法发生了什么？这让我发疯了！

JS Fiddle

Answer 1

两种可能性：

1）而不是

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

使用

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

qTip实际上在初始化时复制title属性（它不绑定到它），因此为了更改qTip，您需要通过qTip methods更改它。

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，当我处理动态工具提示时（例如带有交互式图表的工具提示），它对我来说非常有效。

在切换时更改多个TD中元素的qTip工具提示

1 个答案: