是否有可能以编程方式设置Qtip的位置？

我目前正在实施Qtip2工具提示在整个我的网站，他们工作得很好。是否有可能以编程方式设置Qtip的位置？

但是，我需要在每个元素的基础上设置工具提示的位置。为此，我已经设置了几个data属性是这样的：

<img src="/images/help-icon.png" 
    class="tooltip" 
    title="Lorem ipsum dolor sit amet consectetur adipiscing elit" 
    data-tooltip-my-position="right center" 
    data-tooltip-target-position="left center" />

我一直在使用一个函数来获取数据属性试过，但它看来，my和at性能不接受的功能，因为这只需将工具提示放置在右下角/左上角，这似乎是默认定位。

$(this).find('.tooltip').qtip({ 
    show: { 
     event: 'mouseenter click' 
    }, 
    position: { 
     my: function() { 
      return $(this).data('tooltip-my-position'); // doesn't work 
     }, 
     at: function() { 
      return $(this).data('tooltip-target-position'); // doesn't work 
     } 
    } 
});

我已经通过documentation找，但是似乎对或初始化后编程设置定位属性没有指导。

有谁知道我想要做什么是可能的，如果是这样，如何？

来源

2012-12-20 Rory McCrossan

你需要使用该功能吗？或者你可以完全删除函数，只需使用'$（this）.data（'tooltip-my-position'）;' –

@wirey对不起，我忘了提及我试过。我认为它不起作用，因为'$（this）'超出了范围。 –

我刚刚想出了一个解决方案，通常在我发布后就足够了。

我迷上了它传递目标元素作为参数，然后我就可以从抓住data属性show事件功能：

$(this).find('.tooltip').qtip({ 
    show: { 
     event: 'mouseenter click' 
    }, 
    events: { 
     show: function(event, api) { 
      var $el = $(api.elements.target[0]); 
      $el.qtip('option', 'position.my', $el.data('tooltip-my-position') || 'right center'); 
      $el.qtip('option', 'position.at', $el.data('tooltip-at-position') || 'left center'); 
     } 
    } 
});

我会的情况下，离开这里这个答案是非常有用对未来的某个人。

来源

2012-12-20 16:32:37

谢谢，那就是我一直在寻找的！将'=='更改为'==='以通过JSHint获取它。另外，考虑一下，考虑将你的'data-'属性重命名为'tooltip-position-my'和'tooltip-position-at'，以使它们更符合API并且更容易理解HTML端。 – Adam

是否有可能以编程方式设置Qtip的位置？

回答

相关问题