1/** 2 * Javascript for the autotooltip plugin. 3 * 4 * @type {{show:function, hide:function}} 5 */ 6var autotooltip = function($) { 7 var timer; 8 var MAX_WIDTH = 500; 9 var moveCount = 0; 10 var isVisible; 11 var tt; 12 13 14 /** 15 * Initialize the module. 16 * 17 * @private 18 */ 19 var _init = function() { 20 if (!tt) { 21 tt = $('<div class="plugin-autotooltip_tip" role="tooltip"></div>'); 22 // Cover the various templates. 23 var container = $('.dokuwiki .bodyContent, .dokuwiki .wiki-content, #dokuwiki__content'); 24 // Use the root .dokuwiki if we have to, though we might lose some font information. 25 if (!container.length) { 26 container = $('.dokuwiki'); 27 } 28 // In case the template is really strange. 29 if (!container.length) { 30 container = $('body'); 31 } 32 container.first().append(tt); 33 } 34 35 $(document).on('mousemove', _move); 36 _init = function() {}; // Only once. 37 }; 38 39 40 /** 41 * Mousemove handler. When the mouse moves, so does the tooltip. 42 * 43 * @param {MouseEvent} e 44 * @private 45 */ 46 var _move = function(e) { 47 if (isVisible) { 48 var localMoveCount = ++moveCount; 49 requestAnimationFrame(function() { 50 if (localMoveCount == moveCount) { 51 var top = Math.max(e.pageY - window.scrollY - tt.outerHeight() - 4, 8); 52 var left = Math.max(e.pageX + 4, 8); 53 tt.css({top: top + 'px', left: left + 'px'}); 54 } 55 }); 56 } 57 }; 58 59 60 /** 61 * Show the tooltip with the given HTML. 62 * 63 * @param {String} html - The HTML content of the tooltip. 64 * @param {String} classes - CSS classes to add. 65 * @param {int} delay - Delay, in ms. 66 * @private 67 */ 68 var _show = function(html, classes, delay) { 69 delay = parseInt(delay) || 50; 70 tt.html(html).css({width: 'auto'}).attr('class', 'plugin-autotooltip_tip ' + classes); 71 if (tt.width() > MAX_WIDTH) { 72 tt.css({width: MAX_WIDTH + 'px'}); 73 } 74 isVisible = true; 75 clearInterval(timer); 76 timer = setTimeout(function() { 77 tt.addClass('plugin-autotooltip--visible'); 78 }, delay); 79 }; 80 81 82 return { 83 /** 84 * Show a tooltip. 85 * 86 * @param {Element} elt - Element containing all content. 87 */ 88 show: function(elt) { 89 _init(); 90 _show($('.plugin-autotooltip-hidden-tip', elt).html(), $('.plugin-autotooltip-hidden-classes', elt).text(), $(elt).attr('data-delay')); 91 }, 92 93 94 /** 95 * Hide the tooltip. 96 */ 97 hide: function() { 98 isVisible = false; 99 timer = setTimeout(function() { 100 tt.removeClass('plugin-autotooltip--visible'); 101 }, 50); 102 } 103 }; 104}(jQuery); 105