如何将 qtip2 工具提示移动到另一个元素？

Question

我有一个应用了 qtip2 工具提示的元素。请参阅 JSFfiddle 示例：http://jsfiddle.net/inodb/y7xqvceL/2/。示例中的元素是 <a id="test"> 元素。我想以编程方式将所述工具提示移动到另一个 <a id="test2"> 元素。我想我应该

更新现有工具提示的目标或
复制原始的所有选项并在提供所有这些选项的第二个锚元素上创建一个新的 qtip

问题的背景是我有一个库，当鼠标悬停在 SVG <circle> 元素上时会显示工具提示。我想将这些圆圈包裹在 <g> 标记中，这样我就可以在圆圈上放置 <text>。但是，工具提示仅适用于圆圈，因此如果将鼠标悬停在文本上，则不会显示工具提示。我认为将 qtip2 工具提示从 <circle> 元素移动到 <g> 元素是最简单的。

Answer 1

当我重复使用 qtip2 工具提示及其选项时，我发现创建一个生成或销毁工具提示的函数很有帮助。

Fiddle: http://jsfiddle.net/y7xqvceL/8/

//custom function to create tooltips with similar options or destroy them
function GenerateTooltip(tooltipElement, isCreating) {
    //if creating the tooltip, use these options
    if (isCreating) {
        $(tooltipElement).qtip({
            content: {
                text: 'Tooltip content that should be moved',
            },
        });
    } else {
        //if isCreating == false, destroy the tooltip specified
        tooltipElement.qtip('destroy', true);
    }
}
//...
GenerateTooltip($("#test"), false); //first destroy old tooltip
GenerateTooltip($("#test2"), true); //create new tooltip

如果这太复杂或者这个操作只需要发生一次，我会建议销毁第一个工具提示并手动创建新的。

Fiddle: http://jsfiddle.net/y7xqvceL/9/

//this button click moves the tooltip to the other element
$("#move-tt").click(function () {
    $('#test').qtip('destroy', true); //destroy old tooltip

    $("#test2").qtip({ //create new tooltip
        content: {
            text: 'Tooltip content that should be moved',
        },
    });
});

如何将 qtip2 工具提示移动到另一个元素？

How to move qtip2 tooltip to another element?

javascript

jquery

qtip2