Question

我目前正在我的网站上实施Qtip2工具提示，而且他们的工作非常顺利。

但是，我需要在每个元素的基础上设置工具提示的位置。为此，我设置了几个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，但似乎没有关于在初始化时或之后以编程方式设置定位属性的指导。

有谁知道我想做什么是可能的，如果是的话，怎么样？

Answer 1

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

我将一个函数连接到show事件，该事件将目标元素作为参数传递，然后我可以从中获取data属性：

$(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');
        }
    }
});

我会在这里留下这个答案，以防将来对某人有用。

是否可以通过编程方式设置Qtip的位置？

1 个答案: