- console.log('showDetails()', g_state.tooltip.bookId);
-
- var id = g_state.tooltip.bookId;
- var elem = document.getElementById('details');
- var index = g_state.map[id];
- var book = g_state.cache[index];
- var html = '<div><p><b>' + book.Title + '</b></p>'
- + '<p><i>' + ce(book.AuthorReading) + '<br/>' + ce(book.Series) + ' ' + ce(book.Volume) + '</i></p></div><div>'
- + ce(book.Description)
- + '</div>';
-
- elem.innerHTML = html;
- elem.style.display = 'block';
+ var id = g_state.tooltip.bookId;
+ var elem = document.getElementById('details');
+ var index = g_state.map[id];
+ var book = g_state.cache[index];
+ var html = '<div><p><b>' + book.Title + '</b></p>'
+ + '<p><i>' + ce(book.AuthorReading) + '<br/>' + ce(book.Series) + ' ' + ce(book.Volume) + '</i></p></div><div>'
+ + ce(book.Description)
+ + '</div>';
+
+ // Remember the current mouse (x,y).
+ // If we move the mouse too far from this point, that will trigger hiding the tooltip.
+ g_state.tooltip.mousePos.x = g_state.mousePos.x;
+ g_state.tooltip.mousePos.y = g_state.mousePos.y;
+
+ elem.innerHTML = html;
+
+ elem.style.display = 'block'; // show, and calculate size, so that we can query it below
+
+ var x = g_state.mousePos.x;
+ var y = g_state.mousePos.y;
+
+ var bcr = elem.getBoundingClientRect();
+
+ var width = bcr.width;
+ var height = bcr.height;
+
+ x = Math.max(x - (width / 2), 0);
+ y = Math.max(y - (height / 2), 0);
+
+ elem.style.left = x + 'px';
+ elem.style.top = y + 'px';