[IMP] web: improve tooltip style/design

Improve tooltip style/design to get rid of black background and purple title,
instead design tooltip like popover design, to have tooltip with white
background and light grey title

task-2266829

closes odoo/odoo#53723

Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Ipsita Borisagar <ibo@odoo.com>

addons/web/static/src/scss/primary_variables.scss

@@ -31,11 +31,12 @@ $o-form-lightsecondary: #ccc;
 $o-list-footer-bg-color: #eee;
 $o-list-footer-font-weight: bold;
 
-$o-tooltip-background-color: black;
-$o-tooltip-color: white;
-$o-tooltip-arrow-color: black;
+$o-tooltip-background-color: white;
+$o-tooltip-color: #666666;
+$o-tooltip-arrow-color: white;
 $o-tooltip-text-color: #777777;
-$o-tooltip-title-text-color: #4c4c4c;
+$o-tooltip-title-text-color: black;
+$o-tooltip-title-background-color: #F7F7F7;
 
 // Layout
 //

addons/web/static/src/scss/tooltip.scss

 
 .tooltip {
+    $arrow-size: 6px;
     &.show {
         opacity: 1;
     }
@@ -11,42 +12,103 @@
         color: $o-tooltip-color;
         border-radius: $border-radius;
         box-shadow: 0px 0px 1px 1px $o-brand-secondary;
+        margin: 5px;
+        border-color: $o-tooltip-color;
 
         padding: 5px;
 
         text-align: left;
 
         .oe_tooltip_string {
-            background-color: $o-brand-odoo;
-            color: white;
+            background-color: $o-tooltip-title-background-color;
             font-weight: bold;
-            padding: 5px;
+            padding: 5px 8px;
         }
         .oe_tooltip_help {
-            white-space: pre-line;
-            padding: 5px 5px 0;
+            padding: 8px;
+            margin-bottom: 0px;
         }
         .oe_tooltip_technical {
-            padding: 0;
-            margin: 5px 0 5px 20px;
+            padding: 8px;
+            margin: 0 0 0 15px;
             list-style-type: circle;
 
             .oe_tooltip_technical_title {
                 font-weight: bold;
             }
         }
+        .oe_tooltip_help + .oe_tooltip_technical {
+            padding-top: 0px;
+        }
+    }
+
+    .arrow {
+        &::after {
+            content: '';
+            position: absolute;
+        }
     }
 
-    &.bs-tooltip-top .arrow::before {
-        border-top-color: $o-tooltip-arrow-color!important;
+    &.bs-tooltip-bottom {
+        margin-top: $tooltip-arrow-height;
+        .arrow {
+            top: $tooltip-arrow-height;
+            &::before {
+                border: $arrow-size solid transparent;
+                border-bottom-color: $o-tooltip-color;
+            }
+            &::after {
+                bottom: -1px;
+                border: $arrow-size solid transparent;
+                border-bottom-color: $o-tooltip-title-background-color;
+            }
+        }
     }
-    &.bs-tooltip-bottom .arrow::before {
-        border-bottom-color: $o-tooltip-arrow-color!important;
+    &.bs-tooltip-top {
+        margin-bottom: $tooltip-arrow-height;
+        .arrow {
+            bottom: $tooltip-arrow-height;
+            &::before {
+                border: $arrow-size solid transparent;
+                border-top-color: $o-tooltip-color;
+            }
+            &::after {
+                border: $arrow-size solid transparent;
+                border-top-color: $o-tooltip-arrow-color;
+                margin-top: -1px;
+            }
+        }
     }
-    &.bs-tooltip-left .arrow::before {
-        border-left-color: $o-tooltip-arrow-color!important;
+    &.bs-tooltip-left {
+        margin-right: $tooltip-arrow-height;
+        .arrow {
+            right: $tooltip-arrow-height;
+            &::before {
+                border: $arrow-size solid transparent;
+                border-left-color: $o-tooltip-color;
+            }
+            &::after {
+                border: $arrow-size solid transparent;
+                border-left-color: $o-tooltip-arrow-color;
+                margin-left: -1px;
+            }
+        }
     }
-    &.bs-tooltip-right .arrow::before {
-        border-right-color: $o-tooltip-arrow-color!important;
+    &.bs-tooltip-right {
+        margin-left: $tooltip-arrow-height;
+        .arrow {
+            left: $tooltip-arrow-height;
+            &::before,
+            &::after {
+                border: $arrow-size solid transparent;
+                border-right-color: $o-tooltip-color;
+            }
+            &::after {
+                border: $arrow-size solid transparent;
+                border-right-color: $o-tooltip-arrow-color;
+                margin-right: -1px;
+                right: 0px;
+            }
+        }
     }
 }