wip #1392 @4

diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index 1c5619e8ce74aedabcb4022e5d0bfa41a531c66e..38839dc68160d1eef45f075216b3116c018cb5ef 100644 (file)
--- a/js/libs/fluidbook/fluidbook.tooltip.js
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -1,6 +1,8 @@
 function FluidbookTooltip(fluidbook) {
     this.fluidbook = fluidbook;
     this.displaying = false;
+    this.mouseX = 0;
+    this.mouseY = 0;
     this.init();
 }
 
@@ -9,7 +11,7 @@ FluidbookTooltip.prototype = {
         var $this = this;
 
         $(window).on('mousemove', function (e) {
-            $this.updateTooltipPosition(e);
+            $this.updateMousePosition(e);
         });
 
         $(window).on('fluidbookzoom', function (e, zoom) {
@@ -19,20 +21,56 @@ FluidbookTooltip.prototype = {
 
         if (Modernizr.ftouch) {
             $(document).on('touchstart', 'a[data-tooltip-touch][data-tooltip]', function (e) {
-                $this.updateTooltipPosition(e);
+                $this.updateMousePosition(e);
                 return $this.eventTriggered(this);
             });
         } else {
             $(document).on('mouseover', 'a[data-tooltip]', function (e) {
-                $this.updateTooltipPosition(e);
+                $this.updateMousePosition(e);
                 return $this.eventTriggered(this);
             });
         }
         $("body").append('<div id="tooltip"></div>');
     },
 
-    updateTooltipPosition: function (e) {
-        $("#tooltip").css({top: e.pageY, left: e.pageX});
+    updateMousePosition: function (e) {
+        this.mouseX = e.pageX;
+        this.mouseY = e.pageY;
+        if ($("#tooltip").is(':visible')) {
+            this.updateTooltipPosition();
+        }
+    },
+
+    updateTooltipPosition: function () {
+
+        var y = 's';
+        if (this.mouseY < (this.fluidbook.resize.hh / 2)) {
+            y = 'n';
+        }
+        var x = 'e';
+        if (this.mouseX < (this.fluidbook.resize.ww / 2)) {
+            x = 'w';
+        }
+
+        var w = $("#tooltip").outerWidth();
+        var h = $("#tooltip").outerHeight();
+
+        if (y == 'n') {
+            offsetY = 40;
+        } else {
+            offsetY = -1 * (h + 16);
+        }
+
+        if (x == 'w') {
+            offsetX = -26;
+        } else {
+            offsetX = 26 - w;
+        }
+
+        var top = this.mouseY + offsetY;
+        var left = this.mouseX + offsetX;
+
+        $("#tooltip").attr('data-pos-x', x).attr('data-pos-y', y).css({top: Math.max(1, top), left: Math.max(1, left)});
     },
 
     eventTriggered: function (target) {
@@ -40,16 +78,6 @@ FluidbookTooltip.prototype = {
             return true;
         }
         var $this = this;
-        var maxWidth = 140;
-        if ($(target).data('tooltip-maxwidth') !== null) {
-            maxWidth = $(target).data('tooltip-maxwidth');
-        }
-
-        maxWidth *= 1.28;
-        maxWidth = Math.round(maxWidth);
-
-        var position = $(target).offset();
-        position.top += $(target).outerHeight();
 
         var text = $(target).data('tooltip');
         text = $('<textarea />').html(text).text();
@@ -71,14 +99,25 @@ FluidbookTooltip.prototype = {
             });
         }
 
-        this.displayTooltip(text, position, maxWidth);
+        this.displayTooltip(text);
+        this.updateTooltipPosition();
         return false;
     },
 
-    displayTooltip: function (tooltip, position, maxWidth) {
-        var p = {};
-        p.maxWidth = maxWidth;
-        $("#tooltip").html(tooltip).css(position).show();
+    displayTooltip: function (text) {
+        var t = $("#tooltip");
+        t.css('maxWidth', 250).html(text).show()
+
+        var nbchars = t.text().length;
+        var maxWidth = Math.max(250, Math.min(750, nbchars*1.2));
+
+        for (var w = 250; w <= maxWidth; w += 25) {
+            if ((t.height() * 1.5) > t.width()) {
+                t.css('maxWidth', w);
+            } else {
+                break;
+            }
+        }
 
         return true;
     },

diff --git a/style/fluidbook.less b/style/fluidbook.less
index c45f311bdeae4f2bee22f1208790daf4015d512e..8916c698810cef91a869fe40312ccdd448fd38bf 100644 (file)
--- a/style/fluidbook.less
+++ b/style/fluidbook.less
@@ -1794,23 +1794,62 @@ ul.chapters {
 
 /* Tooltip */
 #tooltip {
+       @tooltip-arrows-size: 12px;
+
        position: absolute;
+       background-color: @tooltip-background;
+       color: @tooltip-color;
        top: 0px;
        left: 0px;
-       padding: 5px 10px;
-       border-radius: 1px;
+       padding: 20px 25px;
+       border-radius: 2px;
        display: none;
-       font-size: 0.8rem;
-       max-width: 340px;
+       font-size: 14px;
        z-index: 100;
        white-space: pre-wrap;
-       line-height: 1.15rem;
+       line-height: 16px;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
-       margin: 20px 0 0 -10px;
+       box-sizing: border-box;
+       pointer-events: none;
+
+       &:after {
+               content: "";
+               position: absolute;
+               width: 0;
+               height: 0;
+               border-left: @tooltip-arrows-size solid transparent;
+               border-right: @tooltip-arrows-size solid transparent;
+               border-radius: 2px;
+               display: block;
+       }
+
+       &[data-pos-y="n"] {
+               &:after {
+                       border-bottom: @tooltip-arrows-size solid @tooltip-background;
+                       top: unit(@tooltip-arrows-size*-1, px);
+               }
+       }
+       &[data-pos-y="s"] {
+               &:after {
+                       border-top: @tooltip-arrows-size solid @tooltip-background;
+                       bottom: unit(@tooltip-arrows-size*-1, px);
+               }
+       }
+
+       &[data-pos-x="w"] {
+               &:after {
+                       left: 16px;
+               }
+       }
+       &[data-pos-x="e"] {
+               &:after {
+                       right: 16px;
+               }
+       }
 }
 
 /* Privacy settings */