[FIX] web: BS4, fix tooltip flickering issues

Closes #26186

2 files changed, 12 insertions, 18 deletions

diff --git a/addons/web/static/src/js/libs/bootstrap.js b/addons/web/static/src/js/libs/bootstrap.js
index 135a6b65df6..3dd2c7049e1 100644
--- a/addons/web/static/src/js/libs/bootstrap.js
+++ b/addons/web/static/src/js/libs/bootstrap.js
@@ -7,11 +7,12 @@ odoo.define('web.bootstrap.extensions', function () {
  */
 
 /* Bootstrap defaults overwrite */
-$.fn.tooltip.Constructor.Default.placement = 'top';
+$.fn.tooltip.Constructor.Default.placement = 'auto';
 $.fn.tooltip.Constructor.Default.fallbackPlacement = ['bottom', 'right', 'left', 'top'];
 $.fn.tooltip.Constructor.Default.html = true;
-$.fn.tooltip.Constructor.Default.trigger = 'hover focus click';
+$.fn.tooltip.Constructor.Default.trigger = 'hover';
 $.fn.tooltip.Constructor.Default.container = 'body';
+$.fn.tooltip.Constructor.Default.boundary = 'window';
 $.fn.tooltip.Constructor.Default.delay = { show: 1000, hide: 0 };
 
 var bootstrapShowFunction = $.fn.tooltip.Constructor.prototype.show;
diff --git a/addons/web/static/src/scss/tooltip.scss b/addons/web/static/src/scss/tooltip.scss
index e40852dd6bc..3350a557c72 100644
--- a/addons/web/static/src/scss/tooltip.scss
+++ b/addons/web/static/src/scss/tooltip.scss
@@ -1,8 +1,8 @@
 
 .tooltip {
-    padding: 0;
-    margin: 0;
-    opacity: 1;
+    &.show {
+        opacity: 1;
+    }
 
     .tooltip-inner {
         max-width: 300px; // fallback for browsers which do not support "vw" unit
@@ -37,23 +37,16 @@
         }
     }
 
-    .tooltip-arrow {
-        -moz-transform: scale(0.9999);
-    }
-    &.top, &.top-left, &.top-right {
-        .tooltip-arrow {
-            border-top-color: $o-tooltip-arrow-color!important;
-        }
+    &.bs-tooltip-top .arrow::before {
+        border-top-color: $o-tooltip-arrow-color!important;
     }
-    &.bottom, &.bottom-left, &.bottom-right {
-        .tooltip-arrow {
-            border-bottom-color: $o-tooltip-arrow-color!important;
-        }
+    &.bs-tooltip-bottom .arrow::before {
+        border-bottom-color: $o-tooltip-arrow-color!important;
     }
-    &.left .tooltip-arrow {
+    &.bs-tooltip-left .arrow::before {
         border-left-color: $o-tooltip-arrow-color!important;
     }
-    &.right .tooltip-arrow {
+    &.bs-tooltip-right .arrow::before {
         border-right-color: $o-tooltip-arrow-color!important;
     }
 }