Switchless TEST

UI Elements for Displaying Reports

author: #anzal


Report example:

Tool-tip (Popup)

On hover, a popup shows up:

Implementation: CSS:

/* Tooltip container */

.tooltip {

position: relative;

display: inline-block;

border-bottom: 1px dotted black; /* If you want dots under the hoverable text */



/* Tooltip text */

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background-color: black;

color: #fff;

text-align: center;

padding: 5px 0;

border-radius: 6px;


/* Position the tooltip text - see examples below! */

position: absolute;

z-index: 1;



/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {

visibility: visible;



<a class="tooltip"></a>

<span class="tooltiptext">


De-emphasized Text

Get text to appear like the denominator here:


Normal Value
<span style="color:grey;font-size: smaller;">

De-emphasized text here


Background color for cell

Notice the different background colors here:



<td style="background-color: <%= bg_color %>;">