2012-01-18 70 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:更改'this'選擇器

上面的代碼在頁面上的所有「提示」圖標周圍繪製了一個黑色邊框......是否有一種方法(使用qtip2)引用特定的「提示」圖形('.selector')?

+0

是否有原因使用代碼而不是針對特定提示圖形的CSS規則來建立邊框樣式? – 2012-01-18 20:27:40

+0

邊界代碼是臨時的,看看我是否得到正確的選擇器或不...當我知道它的工作原理時,我將添加/刪除類。 – redconservatory 2012-01-18 20:48:58

回答

1

查看傳遞給events.show回調的api對象。使用參數名稱,您可以在api.elements.target中找到元素(顯示qTip的元素)。然後可以檢查該元素以決定是否應用特定的樣式。
更多相關元素可從API獲取。

另一種選擇是將qTip插件應用於除自定義樣式之外的所有元素。然後再改變元素的選項,只使用自定義樣式的qTip。

更新:引用由Troy Barlow提出的元素,因爲他的建議可能是我最初提出的數據源的更好選擇。

+0

謝謝!這非常有幫助...我不知道你可以從originalEvent獲得currentTarget。 – redconservatory 2012-01-18 20:55:31

3

在您的show event中,抓取當前的qTip並將樣式應用到它。您可以通過以下方式訪問它:

api.elements.tooltip