javascript - qTip2 打开时更改调用元素的背景颜色

Question

我只是好奇是否有人知道如何做到这一点。基本上我有一张大桌子，每个 td 都有一个带有嵌入式表格的 qtip，可提供更多信息。我希望 td 的背景颜色可以更改以匹配 qtip，以便用户知道这是他们正在查看的特定单元格。这是我的 qtip 的 JS：

            $('.resultCell').each(function(){
                $(this).qtip({
                    content: {
                        text:$('table',this)
                    },
                    position: {
                        my: 'top center',
                        at: 'bottom center'
                    },
                    hide: {
                        fixed: true,
                        delay: 500
                    }
                });
            });

Answer 1

您只需更改内容和其他设置，但此代码将突出td显示实际工具提示的内容。

请参阅下面的此演示和代码：

JavaScript

$(function() {
    $("td").each(function() {
        $(this).qtip({
            content: {
                text: "Test IT"
            },
            position: {
                my: 'top center',
                at: 'bottom center'
            },
            events: {
                show: function(event, api) {
                    api.elements.target.addClass("active");
                },
                hide: function(event, api) {
                    api.elements.target.removeClass("active");
                }
            }
        });
    });
});​

HTML

<table>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
  <tr><td>XXX</td><td>XXX</td><td>XXX</td><td>XXX</td></tr>
</table>

CSS

td {
    border:1px solid #000000;
    padding:5px;
}
table {
    margin: 20px;
}
.active {
    background-color: #FF0000;
}

​</p>