javascripttooltipplotlyjquery-ui-tooltipplotly.js

Plotly.js display tooltip on hover over graph title

Plotly.js allows you to specify a graph title, but there doesn't seem to be an option for specifying a longer description to be shown on hovering over the title.

So, I added a title attribute to the text element that encloses the title text, and then activated JQueryUI Tooltips on the page. But nothing seems to happen when I hover over the title. Here's how I added the title attribute and activated the tooltips:

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

I've also tried the following, which doesn't work either:

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

Full example code here: https://codepen.io/synaptik/pen/eKBYbE

Any idea how I can display a tooltip when hovering over the graph title?

Solution

  • Instead of using JQuery Tooltips, I went with Tippy. However, I still had to modify the Plotly chart like this (thanks to @Naren-Murali):

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

    with the CSS:

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

    Solution: https://codepen.io/synaptik/pen/LrWMKM