Tooltip Alignment

Tags: #<Tag:0x00007f8b1db54be0> #<Tag:0x00007f8b1db54aa0>
#1

I’ve created tooltips to popup when I hover over column headers. I would like them to align just above the header. I have accomplished this as follows

afterOnCellMouseOver: function(e, coords, TD) {
if (coords.row < 0) {
var columnIndex = coords.col;
if (columnTooltips.hasOwnProperty(columnIndex)) {
tooltip.style.visibility = ‘visible’;
tooltip.innerHTML = columnTooltips[columnIndex];
tooltip.style.position = ‘absolute’;

        // Adjust the vertical position to appear just below the header cell
        tooltip.style.top = `${TD.getBoundingClientRect().bottom - 200}px`;
        tooltip.style.padding = '5px';
        tooltip.style.left = `${TD.getBoundingClientRect().left - 100}px`;
      }
    }
  },

This works for a full screen, but at any other size the tooltips shift position, sometimes out of sight.

#2

Hi @kmd2

Unfortunately, your demo does not work for me. But I have a similar demo that we exchange with Clients in an older forum post here https://jsfiddle.net/dbn63mso/ maybe that would help. In general, that is a custom code so there’s no guarantee it will work in all conditions. I tested it on Chrome 120/mac OS Ventura.

48

#3

Thanks, Aleksandra

The problem for me is that the tooltips appear several rows below and a few columns to the right of the header. And, they are in different locations depending on the screen size or orientation. If I adjust for a full width browser like this, they are in completely different locations on other browser widths.

        tooltip.style.top = `${TD.getBoundingClientRect().y - 100}px`;
        tooltip.style.padding = '5px';
        tooltip.style.left = `${TD.getBoundingClientRect().x - 100}px`;
#4

I’ll do my best to help you with debugging if you could share the recent progress of this task in a demo and specify which browsers do you need to support.

#5

Hi Akeksandra. Here is a demo. https://jsfiddle.net/kdeemer/7mgedu0q/12/

The tooltips are not appearing at all, perhaps because the viewing window is smaller than mine.

Thanks

#6

I tested the demo and got out log from the afterOnCellMouseOut hook so surely the hook logic runs. I tried to show tooltips with 2290 px - wide window(saw all columns and some empty space) for the JSFiddle demo, and they did not appear so I do not think that the screen size is the issue.

Here https://jsfiddle.net/p4m1gfdq/ I made some adjustments

  • I created a function that will log (1 second span) position of the tooltip so we can track it
  • I added z-index: 999 !important but that did not help

based on the logs from the tracker function element is there so it might be something with CSS.

#7