tree 4646dc75946064bbd96eafe2c361d30721e6b7e8
parent 47ca54505c87ffac1fe5037c5ec5376ca975bfcf
author Willy Tarreau <w@1wt.eu> 1356224363 +0100
committer Willy Tarreau <w@1wt.eu> 1356295589 +0100
encoding latin1

MEDIUM: stats: use hover boxes instead of title to report details

Using titles to report detailed information is not convenient. The
browser decides to wrap the line where it wants, generally the box
quickly fades away, and it's not possible to copy-paste the text
from the box.

By using two levels, we can make a block appear/disappear depending
on whether its parent it being hovered or not, for example :

    .tip { display: none; }
    u:hover .tip { display: block; }

  or better:

    .tip { display: block; visibility: hidden; }
    u:hover .tip { visibility: visible; }

Toggling visibility ensures that the place required to display the block
is always reserved. This is important to display boxes that are close to
the edges.

Then using <span class="tip">this is a box</span> will make the text
appear only when the upper <u> is hovered.

But this still adds much text. So instead we use a generic <div> tag
which we don't use anywhere else. That way we don't have to specify a
class :

    div { display: block; visibility: hidden; }
    u:hover div { visibility: hidden; }

This works pretty well, even in old browsers from 2005.

This commit does not change the display format, it only replaces the
title attribute with the div tag. Later commits will adjust the layout.