我有一个应用了 qtip2 工具提示的元素。请参阅 JSFfiddle 示例:http://jsfiddle.net/inodb/y7xqvceL/2/ 。示例中的元素是 <a id="test">
元素。我想将所述工具提示移至另一个 <a id="test2">
以编程方式元素。我想我应该要么
- 更新现有工具提示的目标或
- 复制原始的所有选项,并在提供所有这些选项的第二个 anchor 元素上创建一个新的 qtip
问题的背景是我有一个库,当鼠标悬停在 SVG 上时显示工具提示 <circle>
元素。我想将这些圆圈包裹在 <g>
中标签,这样我可以放置 <text>
在圆圈上。但是,工具提示仅适用于圆圈,因此如果将鼠标悬停在文本上,则不会显示工具提示。我想从 <circle>
移动 qtip2 工具提示元素到<g>
元素将是最简单的。
最佳答案
当我重用 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',
},
});
});
关于javascript - 如何将 qtip2 工具提示移动到另一个元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31844267/