diff --git a/draftlogs/5913_fix.md b/draftlogs/5913_fix.md new file mode 100644 index 00000000000..6f07e5bdccf --- /dev/null +++ b/draftlogs/5913_fix.md @@ -0,0 +1,2 @@ + - Handle the case of div with zero (width or) height when positioning unified hover box + (regression introduced in 2.3.0) [[#5913](https://github.com/plotly/plotly.js/pull/5913)] diff --git a/src/components/fx/hover.js b/src/components/fx/hover.js index eff1e1a2c4e..6b54858ddc5 100644 --- a/src/components/fx/hover.js +++ b/src/components/fx/hover.js @@ -205,18 +205,16 @@ exports.loneHover = function loneHover(hoverItems, opts) { }; }); - var container3 = d3.select(opts.container); - var outerContainer3 = opts.outerContainer ? d3.select(opts.outerContainer) : container3; + var rotateLabels = false; - var fullOpts = { + var hoverLabel = createHoverText(pointsData, { + gd: gd, hovermode: 'closest', - rotateLabels: false, + rotateLabels: rotateLabels, bgColor: opts.bgColor || Color.background, - container: container3, - outerContainer: outerContainer3 - }; - - var hoverLabel = createHoverText(pointsData, fullOpts, gd); + container: d3.select(opts.container), + outerContainer: opts.outerContainer || opts.container + }); // Fix vertical overlap var tooltipSpacing = 5; @@ -243,7 +241,7 @@ exports.loneHover = function loneHover(hoverItems, opts) { var scaleX = gd._fullLayout._invScaleX; var scaleY = gd._fullLayout._invScaleY; - alignHoverText(hoverLabel, fullOpts.rotateLabels, scaleX, scaleY); + alignHoverText(hoverLabel, rotateLabels, scaleX, scaleY); return multiHover ? hoverLabel : hoverLabel.node(); }; @@ -657,7 +655,6 @@ function _hover(gd, evt, subplot, noHoverEvent) { var spikelineOpts = { fullLayout: fullLayout, container: fullLayout._hoverlayer, - outerContainer: fullLayout._paperdiv, event: evt }; var oldspikepoints = gd._spikepoints; @@ -826,17 +823,16 @@ function _hover(gd, evt, subplot, noHoverEvent) { fullLayout.paper_bgcolor ); - var labelOpts = { + var hoverLabels = createHoverText(hoverData, { + gd: gd, hovermode: hovermode, rotateLabels: rotateLabels, bgColor: bgColor, container: fullLayout._hoverlayer, - outerContainer: fullLayout._paperdiv, + outerContainer: fullLayout._paper.node(), commonLabelOpts: fullLayout.hoverlabel, hoverdistance: fullLayout.hoverdistance - }; - - var hoverLabels = createHoverText(hoverData, labelOpts, gd); + }); if(!helpers.isUnifiedHover(hovermode)) { hoverAvoidOverlaps(hoverLabels, rotateLabels ? 'xa' : 'ya', fullLayout); @@ -874,7 +870,8 @@ function hoverDataKey(d) { var EXTRA_STRING_REGEX = /([\s\S]*)<\/extra>/; -function createHoverText(hoverData, opts, gd) { +function createHoverText(hoverData, opts) { + var gd = opts.gd; var fullLayout = gd._fullLayout; var hovermode = opts.hovermode; var rotateLabels = opts.rotateLabels; @@ -894,7 +891,7 @@ function createHoverText(hoverData, opts, gd) { var ya = c0.ya; var axLetter = hovermode.charAt(0); var t0 = c0[axLetter + 'Label']; - var outerContainerBB = outerContainer.node().getBoundingClientRect(); + var outerContainerBB = outerContainer.getBoundingClientRect(); var outerTop = outerContainerBB.top; var outerWidth = outerContainerBB.width; var outerHeight = outerContainerBB.height;