wip #4219 @0.75

diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index 27895671db645d9d309db4bf08ce6b002e0356c8..f81227b6fc761a954c0ceaa022e67b0ac7664745 100644 (file)
--- a/js/libs/fluidbook/fluidbook.tooltip.js
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -108,6 +108,14 @@ FluidbookTooltip.prototype = {
 
         var $this = this;
         var text = '';
+        var css = {};
+        if ($(target).is('[data-tooltip-background]')) {
+            css.backgroundColor = $(target).data('tooltip-background');
+        }
+        if ($(target).is('[data-tooltip-color]')) {
+            css.color = $(target).data('tooltip-color');
+        }
+
         if ($(target).is('[data-tooltip]')) {
             text = $(target).attr('data-tooltip');
         } else if ($(target).is('[data-keyboard-tooltip]')) {
@@ -146,20 +154,27 @@ FluidbookTooltip.prototype = {
             });
         }
 
-        this.displayTooltip(text);
+        this.displayTooltip(text, undefined, css);
         return false;
     },
 
-    displayTooltip: function (text, style) {
+    displayTooltip: function (text, style, css) {
         if ($('.fixedTooltip:visible').length > 0) {
             return;
         }
+        if (css === undefined) {
+            css = {};
+        }
         var t = $("#tooltip");
         if (style == undefined) {
             style = '';
         }
         t.attr('data-style', style);
-        t.css('maxWidth', 250).html(text).show()
+        css.maxWidth = 250;
+        if(css.backgroundColor) {
+            t.get(0).style.setProperty('--background-color', css.backgroundColor);
+        }
+        t.css(css).html(text).show();
 
         var nbchars = t.text().length;
         var maxWidth = Math.min(this.fluidbook.resize.ww, Math.max(250, Math.min(750, nbchars * 1.2)));

diff --git a/style/tooltip.less b/style/tooltip.less
index e8a9cc4b9429fe3c598379ae32ec4e2a9d65b627..29b31e1fb003840818e17de7facf08d1a3e52a63 100644 (file)
--- a/style/tooltip.less
+++ b/style/tooltip.less
@@ -4,7 +4,10 @@
   @tooltip-arrows-size: 10px;
 
   position: absolute;
+  --background-color: @tooltip-background;
   background-color: @tooltip-background;
+  background-color: var(--background-color);
+
   color: @tooltip-color;
   top: 0px;
   left: 0px;
@@ -25,7 +28,7 @@
 
   &[data-style="invert"] {
     font-weight: 700;
-    background-color: @tooltip-color;
+    --background-color: @tooltip-color;
     color: @tooltip-background;
 
     &[data-pos-y="n"] {
@@ -72,6 +75,7 @@
   &[data-pos-y="n"] {
     &:after {
       border-bottom: @tooltip-arrows-size solid @tooltip-background;
+      border-bottom: @tooltip-arrows-size solid var(--background-color);
       top: unit(@tooltip-arrows-size*-1, px);
     }
   }
@@ -79,6 +83,7 @@
   &[data-pos-y="s"] {
     &:after {
       border-top: @tooltip-arrows-size solid @tooltip-background;
+      border-top: @tooltip-arrows-size solid var(--background-color);
       bottom: unit(@tooltip-arrows-size*-1, px);
     }
   }
@@ -98,12 +103,14 @@
 
 .fixedTooltip {
   pointer-events: all;
+
   a {
     position: relative;
-    top:-3px;
+    top: -3px;
     margin-right: 25px;
     display: inline-block;
     text-transform: uppercase;
+
     svg {
       height: 19px;
       width: auto;