[UI] Fix the database tooltip hidden problem (#19285)

* Update dataTable.js

* add scrolling points

add scrolling points

* update a ui tests

update a ui tests

1 files changed, 8 insertions, 2 deletions

diff --git a/plugins/CoreHome/javascripts/dataTable.js b/plugins/CoreHome/javascripts/dataTable.js
index 3cd03cbea5..6007af40ec 100644
--- a/plugins/CoreHome/javascripts/dataTable.js
+++ b/plugins/CoreHome/javascripts/dataTable.js
@@ -1585,8 +1585,10 @@ $.extend(DataTable.prototype, UIControl.prototype, {
             tooltip.next().hover(function () {
                 var left = (-1 * tooltip.outerWidth() / 2) + th.width() / 2;
                 var top = -1 * tooltip.outerHeight();
-
                 var thPos = th.position();
+                var distance = tooltip.parent().offset().top;
+                var scroller = tooltip.closest('.dataTableScroller');
+
                 var thPosTop = 0;
 
                 if (thPos && thPos.top) {
@@ -1597,8 +1599,12 @@ $.extend(DataTable.prototype, UIControl.prototype, {
                 // headline
                 top = top + thPosTop;
 
+                if ($(window).scrollTop() >= distance - 100 || scroller.css('overflow-x')==='scroll') {
+                      top = tooltip.parent().outerHeight()
+                }
+
                 if (!th.next().length) {
-                    left = (-1 * tooltip.outerWidth()) + th.width() +
+                      left = (-1 * tooltip.outerWidth()) + th.width() +
                         parseInt(th.css('padding-right'), 10);
                 }