From 2e6727340206a535e51087fc0dbf7e6d3a4e0b7f Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 4 Sep 2013 08:50:05 +0000
Subject: [PATCH]

---
 js/libs/fluidbook/fluidbook.help.js    |  6 ++---
 js/libs/fluidbook/fluidbook.js         |  1 +
 js/libs/fluidbook/fluidbook.nav.js     |  4 ++-
 js/libs/fluidbook/fluidbook.tooltip.js | 35 ++++++++++++++++++++++++++
 style/fluidbook.css                    | 14 +++++++++++
 5 files changed, 56 insertions(+), 4 deletions(-)
 create mode 100644 js/libs/fluidbook/fluidbook.tooltip.js

diff --git a/js/libs/fluidbook/fluidbook.help.js b/js/libs/fluidbook/fluidbook.help.js
index b498efdb..c3276f4c 100644
--- a/js/libs/fluidbook/fluidbook.help.js
+++ b/js/libs/fluidbook/fluidbook.help.js
@@ -50,13 +50,13 @@ FluidbookHelp.prototype = {
 		});
 		var h = 40 + ($("#nav>a").length - 1) * 25;
 		$("nav>a").each(function() {
-			var text = $(this).attr('help');
-			if (text == '') {
+			var text = $(this).data('tooltip');
+			if (text == null || text == undefined || text == '') {
 				return;
 			}
 			var offset = $(this).position();
 			var left = 30 + offset.left;
-			help += '<div class="icon" style="padding-top:' + h + 'px;left:' + left + 'px;">' + $this.fluidbook.l10n.__(text) + '</div>';
+			help += '<div class="icon" style="padding-top:' + h + 'px;left:' + left + 'px;">' + text + '</div>';
 			h -= 25;
 		});
 		$("#nav").transform({
diff --git a/js/libs/fluidbook/fluidbook.js b/js/libs/fluidbook/fluidbook.js
index e7556442..9b29ed23 100644
--- a/js/libs/fluidbook/fluidbook.js
+++ b/js/libs/fluidbook/fluidbook.js
@@ -37,6 +37,7 @@ Fluidbook.prototype = {
 		this.video = new FluidbookVideo(this);
 		this.bookmarks = new FluidbookBookmarks(this);
 		this.index = new FluidbookIndex(this);
+		this.tooltip = new FluidbookTooltip(this);
 		this.refw = 0;
 		this.refh = 0;
 		this.zoom = 1;
diff --git a/js/libs/fluidbook/fluidbook.nav.js b/js/libs/fluidbook/fluidbook.nav.js
index 156633dd..0700582d 100644
--- a/js/libs/fluidbook/fluidbook.nav.js
+++ b/js/libs/fluidbook/fluidbook.nav.js
@@ -36,7 +36,9 @@ FluidbookNav.prototype = {
 		if (className != undefined) {
 			res += ' class="' + className + '"';
 		}
-		res += ' help="' + help + '"';
+		if (help!=undefined && help != '') {
+			res += ' data-tooltip="' + this.fluidbook.l10n.__(help) + '"';
+		}
 		res += '>';
 		res += this.getIcon(name);
 		res += '</a>';
diff --git a/js/libs/fluidbook/fluidbook.tooltip.js b/js/libs/fluidbook/fluidbook.tooltip.js
new file mode 100644
index 00000000..e370dfe5
--- /dev/null
+++ b/js/libs/fluidbook/fluidbook.tooltip.js
@@ -0,0 +1,35 @@
+function FluidbookTooltip(fluidbook) {
+	this.fluidbook = fluidbook;
+	this.init();
+}
+
+FluidbookTooltip.prototype = {
+	init: function() {
+		var $this = this;
+		$(document).on('mouseover', 'a[data-tooltip]', function() {
+			var position = $(this).offset();
+			position.top += $(this).outerHeight() + 20;
+
+			var text = $(this).data('tooltip');
+			var ok = $this.displayTooltip(text, position);
+			if (ok) {
+				$(this).one('mouseout', function() {
+					$this.hideTooltip();
+				});
+			}
+			return true;
+		});
+		$("body").append('<div id="tooltip"></div>');
+	},
+	displayTooltip: function(tooltip, position) {
+		if (tooltip == undefined || tooltip == '') {
+			return false;
+		}
+		position.left-=10;
+		$("#tooltip").text(tooltip).css(position).show();
+		return true;
+	},
+	hideTooltip: function() {
+		$("#tooltip").hide().text('');
+	}
+}
\ No newline at end of file
diff --git a/style/fluidbook.css b/style/fluidbook.css
index 17dbeb6c..57736a15 100644
--- a/style/fluidbook.css
+++ b/style/fluidbook.css
@@ -1285,6 +1285,20 @@ a.button{
 	position:absolute;
 }
 
+/* Tooltip */
+#tooltip{
+	position:absolute;
+	top:0px;
+	left:0px;
+	padding:5px 10px;
+	color:#fff;
+	border-radius: 5px;
+	background:rgba(0,0,0,0.8);
+	display:none;
+	font-size:0.8rem;
+	max-width: 200px;
+}
+
 @media all and (orientation: portrait) {  
 	#ol{display:none;}
 	@-ms-viewport { width: 640px; }
-- 
2.39.5