From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Tue, 20 Jun 2017 15:36:33 +0000 (+0200)
Subject: wip #1392 @4
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=cff9cab4475a8e32d2ebc438e68a629e41c61195;p=fluidbook-html5.git

wip #1392 @4
---

diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
index 1c5619e8..38839dc6 100644
--- 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 c45f311b..8916c698 100644
--- 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 */