Plotly.js将鼠标悬停在图表标题上时显示工具提示
Plotly.js将鼠标悬停在图表标题上时显示工具提示
提问于 2018-06-08 03:17:34
Plotly.js允许您指定图形标题，但似乎没有用于指定悬停在标题上时显示的较长描述的选项。
因此，我向包含标题文本的text元素添加了一个title属性，然后在页面上激活了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
当我将鼠标悬停在图表标题上时，你知道如何显示工具提示吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-12 03:49:40
我没有使用JQuery工具提示，而是使用了Tippy。然而，我仍然不得不像这样修改Plotly图表(感谢@Naren-Murali)：
$('div#myDiv g.g-gtitle > text.gtitle').addClass('graphWrapperPointerEvents');使用CSS：
.graphWrapperPointerEvents {
pointer-events: all !important;
}Stack Overflow用户
发布于 2018-06-09 17:28:41
我检查了你的代码，Jquery-ui-tooltip在与plotly一起工作时会导致一些问题，我不想详细说明，但基本上，在悬停时，新的元素会添加到以前的悬停元素中。
这是我对你的问题的一个解决方案，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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50748717
复制相关文章
相似问题