6

我目前正在我的网站上实现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" />

我尝试使用函数来获取数据属性，但似乎myandat属性不接受函数，因为这只是将工具提示放在右下角/左上角，这似乎是默认定位。

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

我查看了文档，但似乎没有关于在初始化时或之后以编程方式设置定位属性的指导。

有谁知道我正在尝试做的事情是否可行，如果可以，怎么做？

4

1 回答 1

12

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

我将一个函数连接到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');
        }
    }
});

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

于 2012-12-20T16:32:37.760 回答