CSS tooltips as an alternative (or replacement) for JS tooltips

[cloudRoutine]

CSS tooltips would make snippets generated by FSharp.Formatting usable in contexts where js execution is restricted. I think they would also simplify and cut down the size of the generated html pages

<div>
  Let's pretend like this is src code</br>
</br>
<code> Array.<span class="tooltip ts mapfn" >map</span></code>
</div>

.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip.ts:hover::before{
  visibility: visible;
  border-style: solid;
  display: block;
  padding: 4px 8px;
  position: absolute;
  left: 0;
  bottom: 100%;
  white-space: pre;
  background-color: #000;
  color: #fff; 
}

.tooltip.ts.mapfn:hover::before { 
  content: 'you map arrays, \a what did you think? \a ;P';
}

(^ play with this example)

the CSS pseudo classes make it easy to reuse tooltips at multiple points in the same snippet, and nothing as verbose as

<span onmouseout="hideTip(event, 'fs116', 445)" onmouseover="showTip(event, 'fs116', 445)" class="i">

would be needed anymore.

I'm no CSS expert, so there may be a more elegant way to implement this functionality.

[tpetricek]

I'd be happy with this change, provided that it works on reasonable number of modern browsers (which I suspect it does).

[cloudRoutine]

This good enough? :wink:

[tpetricek]

Looks good.

The CSS solution could be more reliable too - the JS code behaved oddly when the parent elements are relative, absolute, etc. So, this needs some testing in the new version too.