Plotly.js 将鼠标悬停在图形标题上时显示工具提示

Question

Plotly.js 允许您指定图形标题，但似乎没有选项可以指定将鼠标悬停在标题上时显示的较长描述。

因此，我title向包含标题文本的元素添加了一个属性text，然后在页面上激活了 JQueryUI 工具提示。但当我将鼠标悬停在标题上时，似乎什么也没有发生。以下是我添加title属性并激活工具提示的方法：

$('div#myDiv g.g-gtitle > text.gtitle')[0].title = 'This is a long description that should show on hover over the title';    
$( document ).tooltip();

我也尝试过以下方法，但也不起作用：

$('div#myDiv g.g-gtitle > text.gtitle').attr('title', 'This is a long description that should show on hover over the title');    
$( document ).tooltip();

完整的示例代码在这里： https: //codepen.io/synaptik/pen/eKBYbE

知道如何在将鼠标悬停在图表标题上时显示工具提示吗？

Answer 1

我没有使用 JQuery 工具提示，而是使用 Tippy。然而，我仍然必须像这样修改 Plotly 图表（感谢@Naren-Murali）：

$('div#myDiv g.g-gtitle > text.gtitle').addClass('graphWrapperPointerEvents');

与CSS：

.graphWrapperPointerEvents {
    pointer-events: all !important;
}

解决方案： https: //codepen.io/synaptik/pen/LrWMKM