Tooltip background inconsistent and incorrect size

[sig]

I have a series of data points with paths that define regions, I'm overlaying them on a map image. When I hover the pointer over a region, I want the tooltip to show some text and a thumbnail image. The tooltip (highcharts-label) is showing the image, but there is a white box behind it (svg highcharts-root) that sometimes is sized to be underneath the entire label area and sometimes is smaller than the label area. Refreshing the page without changing the data can change whether or not the tooltip container is sized correctly, and the tooltip containers for the different regions also vary in whether or not they are sized correctly.

The white svg box behind the label is incorrectly sized and placed.

Screenshot 2023-09-20 214923.png (65.57 KiB) Viewed 585 times

The white svg box is correctly sized.

Screenshot2.png (58.23 KiB) Viewed 585 times

I'd actually rather not have the white svg element at all, but I don't know why it's being created or how to override it.

```
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';
import highchartsMap from 'highcharts/modules/map';

highchartsMap(Highcharts);
<HighchartsReact
constructorType="mapChart"
highcharts={Highcharts}
options={options}
/>

const options = {
tooltip: {
useHTML: true,
headerFormat: '<div style="backgroundColor: {point.color};">',
footerFormat: '</div>',
pointFormatter(): string {
let tooltip = ``;
tooltip += '<table><tr>';
tooltip += `<td>${this.name}</td><td><img src=${this.thumb} /></td>`;
tooltip += '</tr></table>';
return tooltip;
},
},
...
```

This is the resulting element when the container is correctly sized. Notice the svg width=164 height=114
```
<div class="highcharts-tooltip-container" style="position: absolute; top: 477px; pointer-events: none; z-index: 3; left: 394px; transform: scale(1, 0.999808);" dir="ltr">
<svg version="1.1" class="highcharts-root" style="font-family: Helvetica, Arial, sans-serif; font-size: 1rem;" xmlns="http://www.w3.org/2000/svg" width="164" height="114" viewBox="0 0 164 114">
<desc>Created with Highcharts 11.1.0</desc>
<defs><filter id="highcharts-drop-shadow-undefined"><feDropShadow dx="1" dy="1" flood-color="#000000" flood-opacity="0.75" stdDeviation="2.5"></feDropShadow></filter></defs>
<g class="highcharts-label highcharts-tooltip highcharts-color-0" data-z-index="8" filter="none" style="cursor: default; pointer-events: none; width: 1508px;" transform="translate(16,16)" opacity="1"><path fill="#ffffff" class="highcharts-label-box highcharts-tooltip-box" d="M 3 0 L 129 0 A 3 3 0 0 1 132 3 L 132 79 A 3 3 0 0 1 129 82 L 3 82 A 3 3 0 0 1 0 79 L 0 3 A 3 3 0 0 1 3 0 Z" stroke-width="0" stroke="#C7F0F4"></path></g>
</svg>
<div class="highcharts-label highcharts-tooltip highcharts-color-0" style="position: absolute; left: 16px; top: 16px; opacity: 1; cursor: default; pointer-events: none; visibility: inherit;">
<span data-z-index="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 0.8em; white-space: nowrap; color: rgb(51, 51, 51); margin-left: 0px; margin-top: 0px; left: 8px; top: 8px;"><div style="background-color: rgb(199, 240, 244);"><table><tbody><tr><td>Midtown</td><td><img src="/vtm-wayward-children/src/assets/character/maxwell_thumb.jpg"></td></tr></tbody></table></div></span>
</div>
</div>
```

This is that same element after a page reload (no data change), when the szg isn't sized correctly. Notice the svg width=100 and height=69
```
<div class="highcharts-tooltip-container" style="position: absolute; top: 417px; pointer-events: none; z-index: 3; left: 371.778px; transform: scale(1, 0.999808);" dir="ltr">
<svg version="1.1" class="highcharts-root" style="font-family: Helvetica, Arial, sans-serif; font-size: 1rem;" xmlns="http://www.w3.org/2000/svg" width="100" height="69" viewBox="0 0 100 69">
<desc>Created with Highcharts 11.1.0</desc>
<defs><filter id="highcharts-drop-shadow-undefined"><feDropShadow dx="1" dy="1" flood-color="#000000" flood-opacity="0.75" stdDeviation="2.5"></feDropShadow></filter></defs>
<g class="highcharts-label highcharts-tooltip highcharts-color-0" data-z-index="8" filter="none" style="cursor: default; pointer-events: none; width: 1508px;" transform="translate(16,16)" opacity="1"><path fill="#ffffff" class="highcharts-label-box highcharts-tooltip-box" d="M 3 0 L 65 0 A 3 3 0 0 1 68 3 L 68 34 A 3 3 0 0 1 65 37 L 3 37 A 3 3 0 0 1 0 34 L 0 3 A 3 3 0 0 1 3 0 Z" stroke-width="0" stroke="#C7F0F4"></path></g>
</svg>
<div class="highcharts-label highcharts-tooltip highcharts-color-0" style="position: absolute; left: 16px; top: 16px; opacity: 1; cursor: default; pointer-events: none; visibility: inherit;">
<span data-z-index="1" style="position: absolute; font-family: Helvetica, Arial, sans-serif; font-size: 0.8em; white-space: nowrap; color: rgb(51, 51, 51); margin-left: 0px; margin-top: 0px; left: 8px; top: 8px;"><div style="background-color: rgb(199, 240, 244);"><table><tbody><tr><td>Midtown</td><td><img src="/vtm-wayward-children/src/assets/character/maxwell_thumb.jpg"></td></tr></tbody></table></div></span>
</div>
</div>
```

"highcharts": "^11.1.0",
"highcharts-react-official": "^3.2.1",

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

Could you please try to reproduce this issue in an online code editor like JSFiddle? If possible, make it a small Vanilla JS example (minimal reproducible example).

You can start from here: https://jsfiddle.net/BlackLabel/pjgkbuw4/

It's difficult to give you a solution without seeing the code, but I believe that setting a fixed "width" on the "img" tag should solve it.

I'll be waiting for your response.

Best regards!

[sig]

Thank you for the response. It looks like the example you provided (https://jsfiddle.net/BlackLabel/pjgkbuw4/) is already demonstrating the behavior, with the white box behind Point 2 being incorrectly small while the box behind Point 3 is the correct size. I've attached screenshots of what I see in the latest version of Edge, but it's the same when I view the jsfiddle example in the latest Firefox. I have not changed any of the jsfiddle code, though if I refresh the page it sometimes shows different sizing behaviors for the different points, such as sizing the background correctly for all 3 points sometimes.

White box behind tooltip label is too small.

point2.jpg (93 KiB) Viewed 559 times

White box behind tooltip label is correctly sized.

point3.jpg (96.55 KiB) Viewed 559 times

[jakub.s]

You're right - I've managed to see what's wrong in this demo.

The problem appears when the tooltip is partly outside the plot area.

Could you please check if setting tooltip.outside: true works?

Here's an updated demo: https://jsfiddle.net/BlackLabel/bmaehx94/

Best regards!

[sig]

The new jsfiddle demo you provided with the `outside: true,` still produces the bad behavior.

outside_true_pt2.jpg (81.35 KiB) Viewed 557 times

I've also tried adding that line to my more complicated program and it doesn't seem to change the behavior there (some random subset of the tooltip labels will be incorrectly sized, and can change on page refresh).

Part of the odd behavior is where the label is rendered. On my map, when the label is correctly sized it is rendered center about 50px above the pointer. When it is incorrectly rendered, the white label box is centered 50 px above the pointer but the tooltip content extends down and beneath the pointer. I've added a bright red dot to my screenshots to indicate where the pointer is relative to the rendered tooltip label.

Cursor was at the red dot below the tooltip contents.

Screenshot2.png (58.32 KiB) Viewed 557 times

Cursor was at the red dot on top of the tooltip contents.

Screenshot 2023-09-20 214923.png (65.72 KiB) Viewed 557 times

Thanks for looking into this.

[sig]

I've discovered that refreshing the page while the tooltip is within one of the map areas will cause the white label box to be incorrectly sized, even if the entire tooltip content will fit within that area. I'm also seeing that sometimes a neighboring area (but not all neighboring areas) will have correctly sized white boxes.

I've uploaded a screencapture of this behavior at https://emalm.com/?v=H5ZMh

[jakub.s]

I think I might have a clue on what's the source of the problem.

Could you please try setting both width and height on the image tag and see if that solves it for you?

The tooltip might be sized incorrectly because the img tag has no defined dimensions and the tooltip size is determined before we get the image from the source.

Here's an updated demo: https://jsfiddle.net/BlackLabel/jdfmza6e/ where everything seems to work fine (at least on my machine).

Please let me know if that solves it for you as well.

Best regards!

[sig]

Setting the width and the height on the img element fixed the issue. I've tested it in both Edge and Chrome, and with page refreshes that were previously consistently showing the bad behavior, and it's creating correctly sized and positioned white background boxes now.

Good catch. I wouldn't have thought the tooltip size would be calculated before the image fetch, but I can see why that could be the case. Thank you for hunting this down.