qTip2 Изменить цвет фона вызывающего элемента при открытом - PullRequest
Новая
       17

qTip2 Изменить цвет фона вызывающего элемента при открытом

1 голос
/ 06 марта 2012

Мне просто любопытно, если кто-нибудь знает, как это сделать.В основном у меня есть большая таблица, и каждый тд имеет Qtip со встроенной таблицей, которая предоставляет больше информации.Я хотел бы, чтобы цвет фона td изменился в соответствии с qtip, чтобы пользователь знал, какую именно ячейку он просматривает.Вот JS для моего Qtip: 

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

1 Ответ

1 голос
/ 04 мая 2012

Вам нужно только изменить содержимое и другие настройки, но в этом коде будет выделен 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;
}

1019 *

...