Question

$('.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）来引用特定的“提示”图形（'.selector'）？

Answer 1

在您的show事件中，抓住当前的qTip并将样式应用于它。您可以使用以下方式访问它：

api.elements.tooltip

Answer 2

查看传递给api回调的events.show对象。使用参数名称，您将在api.elements.target中找到元素（显示qTip的元素）。然后可以检查该元素以决定是否应用特定样式更多相关元素可从API获得。

另一个选项是为所有元素应用qTip插件，但具有自定义样式的元素除外。然后另一次使用自定义样式的qTip更改了元素的选项。

更新：参考Troy Barlow提出的元素，因为他的建议可能是我最初建议的数据源的更好选择。

qtip2：改变这个＆＃39;选择

2 个答案: