});\r
var h = 40 + ($("#nav>a").length - 1) * 25;\r
$("nav>a").each(function() {\r
- var text = $(this).attr('help');\r
- if (text == '') {\r
+ var text = $(this).data('tooltip');\r
+ if (text == null || text == undefined || text == '') {\r
return;\r
}\r
var offset = $(this).position();\r
var left = 30 + offset.left;\r
- help += '<div class="icon" style="padding-top:' + h + 'px;left:' + left + 'px;">' + $this.fluidbook.l10n.__(text) + '</div>';\r
+ help += '<div class="icon" style="padding-top:' + h + 'px;left:' + left + 'px;">' + text + '</div>';\r
h -= 25;\r
});\r
$("#nav").transform({\r
this.video = new FluidbookVideo(this);\r
this.bookmarks = new FluidbookBookmarks(this);\r
this.index = new FluidbookIndex(this);\r
+ this.tooltip = new FluidbookTooltip(this);\r
this.refw = 0;\r
this.refh = 0;\r
this.zoom = 1;\r
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>';
--- /dev/null
+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
position:absolute;\r
}\r
\r
+/* Tooltip */\r
+#tooltip{\r
+ position:absolute;\r
+ top:0px;\r
+ left:0px;\r
+ padding:5px 10px;\r
+ color:#fff;\r
+ border-radius: 5px;\r
+ background:rgba(0,0,0,0.8);\r
+ display:none;\r
+ font-size:0.8rem;\r
+ max-width: 200px;\r
+}\r
+\r
@media all and (orientation: portrait) { \r
#ol{display:none;}\r
@-ms-viewport { width: 640px; }\r