html鼠标悬停出现新元素,plotly.js将鼠标悬停在图形标题上时显示工具提示

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;

}

This is a really long title

/* JAVASCRIPT CODE GOES HERE */