How are Koka web-rendered "hover tooltips" implemented?

[dan-zheng]

Context

The Koka book is so cool because hovering over types shows a tooltip with the type name. Clicking on the type name takes us to the definition of the type (in the standard library, etc).

Questions

I wonder where/how all this is implemented in Koka? Specific questions:

• What Haskell/CSS/JS details are involved in the implementation?
• What code produces the tooltip?
• What code produces the index of the standard library (e.g. type list<a>)?

[daanx]

:-) Thanks! Yeah, the Koka compiler generates a "range map" with type information etc for each compilation unit and this is used for example by the VSCode language server that @fwcd is working on (#100). But also it is used to generate the documentation for the standard libraries and documentation. The documentation uses Koka's "literal" mode with kk.md files. You can find this in the doc/spec directory but it is all undocumented for now; the util/docs script generates it all (use stack exec koka -- util/docs to run it).

Anyway, the tooltips are pure css, the file doc/koka.css specifies this. Essentially there are link elements <a> with a class .pp (for popup) and inside the link elements there is a div with class .pc that is only shown when hovering. This is all generated by the koka compiler from the internal range map (in src/Syntax/Colorize.hs -- way too much work lol but it is neat and now useful for the VSCode integration as well :-)). The CSS is something like:

/* popup boxes: for space we call this pp (for popup) and pc (for popup-content) */
a.pp    { 
  position: relative;
  text-decoration: none;
  color: black;
}

.pc { 
  display: none;
}

a.pp:hover  { 
  z-index: 100;
  text-decoration: none;
}

a.pp:hover .pc, .tooltip { 
  display:block;
  position:absolute;
  top:1.5em;
  left:2ex;
  padding: 0.2ex 0.75ex 0.2ex 0.5ex;
  border:1px solid black;
  background: #fffdf0;   
  white-space: pre;
}

a.pp a.pp:hover .pc
  { top: 3em }

[dan-zheng]

Thanks a bunch Daan! We're interested in building this technology for Dex and may borrow some ideas 🙂