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。

请参阅此DEMO和以下代码：

的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;
}