2012-01-18 1 views
1
$('.selector').qtip({ 
    content: { 
     text: function(api) { 
     return $(this).children('.tip').clone(); 
     } 
    }, 
    style: { 
     classes: 'ui-tooltip-rounded', 
     width: 210 
    }, 
    position: { 
     my: 'bottom center', 
     at: 'bottom center', 
     viewport: $(window) 
    }, 
    hide: { 
     fixed: true, 
     delay: 500 
    }, 
    events: { 
     show: function(event, api) { 
     $('.selector').css('border', '1px solid black'); 
     } 
    } 

}); 

Я использую плагин qtip 2, но я бы хотел изменить конкретный селектор ('this') вместо всех селекторов.qtip2: change 'this' selector

Код выше рисует черную рамку вокруг всех моих «подсказок» на странице ... есть способ (используя qtip2) ссылаться на конкретную графику «подсказки» («.selector»)?

+0

Есть ли причина, по которой вы устанавливаете свой стиль границы с помощью кода вместо правила CSS, ориентированного на ваш конкретный графический символ? –

+0

Код границы временный, чтобы увидеть, получаю ли я правильный селектор или нет ... когда я знаю, что это работает, я добавлю/удалю класс вместо этого. – redconservatory

ответ

1

Посмотрите на объект api, который передается на обратный вызов events.show. С именами параметров вы найдете элемент (для которого показан qTip) в api.elements.target. Затем элемент можно исследовать, чтобы решить, применять ли конкретный стиль.
Другие связанные элементы доступны от API.

Другой вариант - применить плагин qTip для всех элементов, кроме одного с пользовательским стилем. Затем в другой раз с измененными параметрами для элемента с пользовательским стилем qTip.

Обновление: Ссылаясь на элемент, предложенный Трой Барлоу, поскольку его предложение, вероятно, является лучшим выбором для моего первоначально предложенного источника данных.

+0

спасибо! Это очень помогает ... Я не знал, что вы можете получить currentTarget от originalEvent. – redconservatory

3

В вашем шоу-мероприятии возьмите текущий qTip и примените к нему стиль. Вы можете получить к нему доступ:

api.elements.tooltip