Fossil

Check-in [cf1f4243]
Login

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

Overview
Comment:Show tooltips in the color scheme of the object that the tooltip refers to.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | tooltip-experiments
Files: files | file ages | folders
SHA3-256: cf1f42435a38fc62a689e6a21069544bbe25bf055047df25d71738ca09439c3a
User & Date: drh 2019-05-22 18:09:41
Wiki:tooltip-experiments
Context
2019-05-22
23:24
Add a non-linked "type" name in front of all tooltips. Style the foreground color and border color based on the default font color. check-in: 2bfa69a3 user: drh tags: tooltip-experiments
18:09
Show tooltips in the color scheme of the object that the tooltip refers to. check-in: cf1f4243 user: drh tags: tooltip-experiments
16:47
CSS changes to the look of the tooltip. check-in: b5cfa435 user: drh tags: tooltip-experiments
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/default_css.txt.

194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
.tl-line.dotted.v {
  width: 0px;
  border-left-width: 2px;
  border-left-style: dotted;
  background: rgba(255,255,255,0);
}
.tl-tooltip {
  background-color: #fecd4b;
  color: black;
  text-align: center;
  padding: 5px 1em;
  border: 1px solid black;
  border-radius: 6px;
  position: absolute;
  z-index: 100;
}
.tl-tooltip a {
  background-color: #fecd4b;
  color: #004080;
}

span.tagDsp {
  font-weight: bold;
}
span.wikiError {
  font-weight: bold;
  color: red;







<
<







<
<
<
<







194
195
196
197
198
199
200


201
202
203
204
205
206
207




208
209
210
211
212
213
214
.tl-line.dotted.v {
  width: 0px;
  border-left-width: 2px;
  border-left-style: dotted;
  background: rgba(255,255,255,0);
}
.tl-tooltip {


  text-align: center;
  padding: 5px 1em;
  border: 1px solid black;
  border-radius: 6px;
  position: absolute;
  z-index: 100;
}





span.tagDsp {
  font-weight: bold;
}
span.wikiError {
  font-weight: bold;
  color: red;

Changes to src/graph.js.

586
587
588
589
590
591
592

593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615








616
617
618
619
620
621
622
    tooltipInfo.ixHover = findTxIndex(e);
    tooltipInfo.posX = e.x;
    tooltipInfo.posY = e.y;
    showGraphTooltip();
  }
  function showGraphTooltip(){
    var html = null

    if( tooltipInfo.ixHover==-2 ){
      var ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
      var h = tx.rowinfo[ix].h
      var dest = tx.baseUrl + "/info/" + h
      if( tx.fileDiff ){
        html = "<a href=\""+dest+"\">artifact "+h+"</a>"
      }else{
        html = "<a href=\""+dest+"\">check-in "+h+"</a>"
      }
    }else if( tooltipInfo.ixHover>=0 ){
      var ix = tooltipInfo.ixHover
      var br = tx.rowinfo[ix].br
      var dest = branchHyperlink(ix)
      var hbr = br.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
      html = "<a href=\""+dest+"\">"+hbr+"</a>"
      tooltipInfo.ixActive = ix;
    }
    if( html ){
      /* Setup while hidden, to ensure proper dimensions. */








      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset







>

|








|












>
>
>
>
>
>
>
>







586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
    tooltipInfo.ixHover = findTxIndex(e);
    tooltipInfo.posX = e.x;
    tooltipInfo.posY = e.y;
    showGraphTooltip();
  }
  function showGraphTooltip(){
    var html = null
    var ix = -1
    if( tooltipInfo.ixHover==-2 ){
      ix = parseInt(tooltipInfo.nodeHover.id.match(/\d+$/)[0],10)-tx.iTopRow
      var h = tx.rowinfo[ix].h
      var dest = tx.baseUrl + "/info/" + h
      if( tx.fileDiff ){
        html = "<a href=\""+dest+"\">artifact "+h+"</a>"
      }else{
        html = "<a href=\""+dest+"\">check-in "+h+"</a>"
      }
    }else if( tooltipInfo.ixHover>=0 ){
      ix = tooltipInfo.ixHover
      var br = tx.rowinfo[ix].br
      var dest = branchHyperlink(ix)
      var hbr = br.replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
      html = "<a href=\""+dest+"\">"+hbr+"</a>"
      tooltipInfo.ixActive = ix;
    }
    if( html ){
      /* Setup while hidden, to ensure proper dimensions. */
      if( tx.rowinfo[ix].bg.length ){
        tooltipObj.style.backgroundColor = tx.rowinfo[ix].bg
      }else{
        tooltipObj.style.backgroundColor = 
          getComputedStyle(document.body).getPropertyValue('background-color')
      }
      tooltipObj.style.color = tx.rowinfo[ix].fg

      tooltipObj.style.visibility = "hidden"
      tooltipObj.innerHTML = html
      tooltipObj.style.display = "inline"
      tooltipObj.style.position = "absolute"
      var x = tooltipInfo.posX + 4 + window.pageXOffset
      tooltipObj.style.left = x+"px"
      var y = tooltipInfo.posY + window.pageYOffset