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 Tooltips я пошел с 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

Answer 2

Я проверил ваш код, Jquery-ui-tooltip вызывает некоторые проблемы при работе вместе с plotly, я не хочу вдаваться в подробности, но в основном при наведении новый элемент добавляется к предыдущему элементу наведения.

Это моя версия решения для вашего вопроса, графически для всех элементов графика было установлено значение pointer-events:none, когда с этими элементами не происходит никаких событий, поэтому я отключил это с помощью CSS pointer-events: all, также нам нужноОберните график внутри div и span, содержащих содержимое всплывающей подсказки, таким образом, используя события javascript mouseover и mouseout, мы можем скрыть / показать подсказку.

Пожалуйста, пройдите черезниже код и дайте мне знать, если какие-либо сомнения, также дайте мне знать, если ваша проблема решена, спасибо!

var data_x = ['2018-05-01', '2018-05-02', '2018-05-03', '2018-05-04', '2018-05-05', '2018-05-06', '2018-05-07', '2018-05-08', '2018-05-09'];

// data
var Data = {
  type: 'scatter',
  x: data_x,
  y: [4, 2, -1, 4, -5, -7, 0, 3, 8],
  mode: 'lines+markers',
  name: 'Data',
  showlegend: true,
  hoverinfo: 'all',
  line: {
    color: 'blue',
    width: 2
  },
  marker: {
    color: 'blue',
    size: 8,
    symbol: 'circle'
  }
}


// layout
var layout = {
  title: 'My Title',
  xaxis: {
    zeroline: false
  },
  yaxis: {
    range: [data_x[0], data_x[data_x.length - 1]],
    zeroline: false
  }
}

Plotly.plot('myDiv', [Data], layout);

$('#myDiv text.gtitle').on('mouseover', function(e) {
  var hovertext = $('span.custom-tooltip');
  var pos = e.target.getBoundingClientRect();
  hovertext.css("left", (pos.left - (hovertext.width() / 2) + (pos.width / 2)) + "px");
  hovertext.css("top", pos.top * 1.5 + "px");
  hovertext.css("visibility", "visible");
})

$('#myDiv text.gtitle').on('mouseout', function(e) {
  var hovertext = $('span.custom-tooltip');
  hovertext.css("visibility", "hidden");
})

.wrapper {
  position: relative;
}

.wrapper .custom-tooltip {
  visibility: hidden;
  display: inline;
  width: fit-content;
  position: absolute;
  left: 0px;
  right: 0px;
}

#myDiv text.gtitle {
  pointer-events: all !important;
}

.wrapper .custom-tooltip.show {
  visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<!-- Plotly chart will be drawn inside this DIV -->
<div class="wrapper">
  <div id="myDiv"></div>
  <span class="custom-tooltip">This is a really long title</span>
</div>
<script>
  /* JAVASCRIPT CODE GOES HERE */
</script>