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;

}

HTML

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


<span class="tooltiptext">

</span>

De-emphasized Text

Get text to appear like the denominator here:

Implementation:

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

De-emphasized text here

</span>

Background color for cell

Notice the different background colors here:

Implementation:


<%
bg_color='rgb(0,100,0,0.5);'
%>


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