是否可以通过编程设置Qtip的位置? [英] Is it possible to set position of a Qtip programmatically?

问题描述

我目前正在整个网站上实施 Qtip2 工具提示，并且它们运行良好.

I'm currently implementing Qtip2 tooltips thoughout my site, and they're working very well.

但是，我需要在每个元素的基础上设置工具提示的位置.为此，我设置了几个data属性，如下所示:

However, I need to set the position of the tooltip on a per-element basis. For this I've setup a couple of data attributes like this:

<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属性似乎不接受函数，因为这只是将工具提示放在右下角/左上角，是默认位置.

I have tried using a function to get the data attribute, however it appears that the my and at properties do not accept a function, as this simply places the tooltip in the bottom right/top left which appears to be the default positioning.

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

我已经浏览了文档，但似乎没有在初始化时或初始化后以编程方式设置定位属性的指南.

I have looked through the documentation, but there appears to be no guidance on programmatically setting positioning properties on or after initialisation.

有人知道我要做什么吗?如果可以，怎么办?

Does anyone know if what I'm trying to do is possible, and if so, how?

推荐答案

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

I just came up with a solution, typically enough just after I posted here.

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

I hooked up a function to the show event which is passed the target element as a parameter which I can then grab the data attributes from:

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

我将在此处保留此答案，以防将来对某人有用.

I'll leave this answer here in case it's useful to someone in the future.

这篇关于是否可以通过编程设置Qtip的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！