Fossil

Check-in [bd803b06]
Login

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Hide the tooltip if the mouse is outside the current timeline table, and outside the tooltip itself.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-experiments
Files: files | file ages | folders
SHA3-256: bd803b06267b1a77dd4aa8d3597482319d122ec3e3033cbc58c6419d8df39d1c
User & Date: florian 2019-05-20 08:19:00
Wiki:tooltip-experiments
Context
2019-05-20
08:21
Classic styling for the tooltip (grey shadow, also works with dark backgrounds) and the hyperlink (blue and underlined, to indicate it can be clicked). check-in: cdb85ba9 user: florian tags: tooltip-experiments
08:19
Hide the tooltip if the mouse is outside the current timeline table, and outside the tooltip itself. check-in: bd803b06 user: florian tags: tooltip-experiments
08:14
Make the "click to show tooltip" action more "discoverable" with a changing mouse cursor, similar to the timeline nodes. This example uses the "pointer" cursor, but the "help" cursor may also be an option. check-in: 8b8eaad8 user: florian tags: tooltip-experiments
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/graph.js.

85
86
87
88
89
90
91









92
93
94
95
96
97
98
  amendCss(tx.circleNodes, tx.showArrowheads);
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
    document.getElementsByTagName('body')[0].style.cursor = cursor;









  };
  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;

  function initGraph(){







>
>
>
>
>
>
>
>
>







85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
  amendCss(tx.circleNodes, tx.showArrowheads);
  topObj.onclick = clickOnGraph
  topObj.ondblclick = dblclickOnGraph
  topObj.onmousemove = function(e) {
    var ix = findTxIndex(e);
    var cursor = (ix<0) ? "" : "pointer"; /* Or: cursor = "help"? */
    document.getElementsByTagName('body')[0].style.cursor = cursor;
  };
  topObj.onmouseleave = function(e) {
    /* Hide the tooltip if the mouse is outside the "timelineTableN" element,
    ** and outside the tooltip. */
    if (tooltipObj.style.display != "none" &&
          e.relatedTarget &&
          e.relatedTarget != tooltipObj) {
      tooltipObj.style.display = "none";
    }
  };
  var canvasDiv;
  var railPitch;
  var mergeOffset;
  var node, arrow, arrowSmall, line, mArrow, mLine, wArrow, wLine;

  function initGraph(){