Datagrid, Tooltip: Mouse leave event is being fired while hovering over tooltip

[krishollenbeck]

Describe the bug Tooltip mouse leave event is being fired while hovering over tooltip. This only appears to be happening with the following conditions.

1. Formater used is Editor
2. Tooltip is dynamic
3. contentTooltip is true

To Reproduce

Steps to reproduce the behavior:

1. Make the following changes to test-custom-tooltip-dynamic.html

 columns.push({ id: 'status', name: 'Exception', field: 'status',
      contentTooltip: true,
      formatter: Formatters.Editor,
      tooltip: function(row, cell, value) {
        return 'Row: ' + row + ' Cell: ' + cell + ' Value: ' + value;
        var tooltip = `
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae neque arcu. Pellentesque mollis tincidunt tellus ac suscipit. Vestibulum eget dui eu turpis maximus elementum. Vivamus rhoncus nisl vel fringilla vulputate. Vestibulum et ipsum condimentum, sollicitudin felis id, bibendum justo. Ut rutrum, urna ut venenatis commodo, justo nisi eleifend lorem, vitae aliquet lectus mi vel sapien. Praesent vulputate, elit at consequat tristique, magna arcu fermentum elit, ut ultrices sem lectus sagittis ipsum. Mauris vel malesuada velit, ut tempus justo. Nulla facilisi. Aliquam rhoncus, magna ac laoreet gravida, risus nibh ultrices nulla, eget tristique tellus sapien convallis mi. Nunc ac turpis iaculis, iaculis nulla ut, pharetra nisi. Maecenas cursus placerat odio ut condimentum. Suspendisse potenti. Pellentesque non velit non erat pulvinar pretium eget at libero. Etiam id elit et tortor consequat aliquam pellentesque at massa. Morbi malesuada libero sed diam consectetur, ut placerat diam mattis.
      Vivamus faucibus sem a enim convallis, non aliquet lacus suscipit. Ut lacus est, blandit vel est non, laoreet gravida dolor. Integer finibus blandit purus vel cursus. Integer vestibulum vel ipsum ac facilisis. Nullam ac metus id ligula ornare volutpat. Morbi dolor elit, tincidunt a mattis ut, semper vel arcu. Phasellus tempus, nisl non hendrerit convallis, enim erat accumsan nulla, sit amet porttitor ante diam a dui. Proin bibendum, lorem in rutrum lacinia, ante lacus congue dui, quis pellentesque orci erat ac sapien. Ut nec nisi non odio pharetra feugiat. Phasellus gravida mattis orci eget molestie. Etiam eleifend, lorem ac bibendum tempor, sapien neque consequat nisl, ut efficitur velit justo ac justo. Sed non orci ut nisi fermentum faucibus vel eu ante. Nulla id mauris nec orci dictum rhoncus id nec velit. Pellentesque id tortor vitae tortor placerat sollicitudin. Sed nec ante nec ipsum consequat feugiat.
    `;

        return 'Row: ' + row + ' Cell: ' + cell + ' Value: ' + tooltip;
      },
      width: 100 }
    );

2. Go to http://localhost:4000/components/datagrid/test-custom-tooltip-dynamic.html
3. Hover over cell in the "Exception" column
4. The tooltip flashes continuously.

Expected behavior The tooltip should not flash continuously.

Version 4.57.1

Screenshots https://user-images.githubusercontent.com/1056684/143943321-ed90644a-6d36-48b8-89f7-c24ae8fffed5.mp4

Platform

• Infor Landmark
• Windows 10
• Chrome 96.0.4664.45

Additional context Sometimes it appears to not be an issue. You may need to reload the page or resize it a bit. I believe this is probably related to the tooltip caching.

[tmcconechy]

Wonder does this happen if there is smaller amount of text in the tooltip? Seems like the tooltip covers the entire page. Whats the entire use case here?

[pwpatton]

The use case is that there is a lot of text in a tooltip. In Landmark app developer can specify tooltip text using data from the system. We don't have control over that text so sometimes there can be quite a lot. I believe that's when we see the flashing.

[tmcconechy]

@tjamesallen15 also see the issue here:

1. https://main-enterprise.demo.design.infor.com/components/datagrid/example-editable.html
2. Make a cell blank in the activity column so the error shows
3. Hover the error icon -> notice it constantly blinks on and off

[tjamesallen15]

@tjamesallen15 also see the issue here:

1. https://main-enterprise.demo.design.infor.com/components/datagrid/example-editable.html
2. Make a cell blank so the error shows
3. Hover the tooltip -> notice it constantly blinks

I can't reproduce this one. Can you show me a video? It doesnt blink on my end.

[tmcconechy]

@tjamesallen15 try the updated steps above and see https://watch.screencastify.com/v/LM7GW4KuYnQlmCnxKEo2

[jbrcna]

QA Passed https://main-enterprise.demo.design.infor.com/components/datagrid/example-editable.html

https://main-enterprise.demo.design.infor.com/components/datagrid/test-custom-long-tooltip.html