Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

On hover custom tooltip position

See original GitHub issue

Creating a custom hover template using the plotly_hover event and displaying as below screenshot. the position of the custom tooltip is not proper. Ideally, it should display the custom tooltip in the same position as currently, the original tooltip is showing. I am using the x and y positions as below:


  gd.on('plotly_hover', function (eventData) {
            const point = eventData.points[0];
            const labelcount =;
            var PointY = eventData.points[0].bbox.y1;
            if (labelcount / 2 > point.i) {
                PointY = eventData.points[0].bbox.y1 / 2;

Fiddle demo -

  1. Implemented a tooltip showing all labels and the active labels will be bolder
  2. Hover template position is not accurate when I set the transform value.

How to fix the position of the tooltip and display it at the correct position?


Issue Analytics

  • State:open
  • Created 2 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

alexcjohnsoncommented, Feb 3, 2022

Most of the time we put the tooltip either to the left or right of the bbox, depending on the tooltip size and the available space on either side. We don’t know how big your tooltip will be, nor whether you will allow it to spill out of the graph div, so can’t make that decision for you.

When the tooltip ends up on the right, that means its left edge is at x1 and it is vertically centered on (y0+y1)/2. When it ends up on the left its right edge is at x0, vertical alignment is the same.

hanatharesh2712commented, Feb 3, 2022

@alexcjohnson Thank you so much for the detailed info!

so, You mean in the event data do not have such info for tooltip positions? How can I calculate to determine where to put the Plotly hover label so that it’s outside but pointing to that region based on bbox.x0, y0, x1, y1?

Read more comments on GitHub >

github_iconTop Results From Across the Web

CSS Tooltip - W3Schools
The :hover selector is used to show the tooltip text when the user moves the mouse over the <div> with class="tooltip" . Positioning...
Read more >
Positioning tooltip with mouse hover - Stack Overflow
What do I have to add to force the tooltip to appear in a position relative to the cell of the heat map?...
Read more >
Building a tooltip component -
In this post I want to share my thoughts on how to build a color-adaptive and accessible <tool-tip> custom element.
Read more >
Building a simple tooltip component that never goes off screen
We can easily build a tooltip for desktop screens using the :hover pseudo-class. The drawback with this approach is that we need a...
Read more >
How to position tooltips correctly with CSS - Tutorialspoint
To position tooltips correctly, use the right, left, top and bottom properties. Let us see how to position tooltips on the right: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found