Issue 1140 Mockup Markup

mockup-css.css

#tooltip {
  border-radius: 100%;
  border: 1px solid;
  display: inline-block;
  width: 20px;
  height: 20px;
  position:relative;
  vertical-align:-6px;
  margin-left:5px;
  transition:all 0.1s ease-in-out;
}

#tooltip:before{
  content:"!";
  position:absolute;
  left:7px;
  top:1px
}

#tooltip:hover{
  background:#0073aa;
  color:white;
}

#tooltip-modal{
  position:fixed;
  top:195px;
  left:467px;
  background:white;
  box-shadow:1px 1px 2px 0 #aaaaaa;
  padding:10px;
}

#tooltip-modal:after{
  display:block;
  content:'';
  width: 0; 
  height: 0; 
  position:absolute;
  top:10px;
  left:-10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  border-right:10px solid white;
}

#tooltip-modal dt{
  clear:right;
  float:left;
}

#tooltip-modal dd{
  float:right;
  margin-left:0px;
}

#tooltip-modal .total{
  clear:both;
  font-weight:bolder;
  border-top:1px solid black;
  background:black;
}

#tooltip-modal .info{
  height:25px;
  border-bottom:1px solid black;
  margin-bottom:5px;
  font-size:10px;
}

#tooltip-modal .info dd, #tooltip-modal .info dt{
  float:left;
  margin:0px;
}

#tooltip-modal .info dd{
  margin-left:10px;
}


#tooltip-modal .info dt{
  font-weight:bold;
}

#tooltip-modal dl{
  margin:0;
}

.with-separator:after{
  content:"|";
  margin-left:10px;
  margin-right:10px;
}

mockup-tooltip.html

<a id="tooltip" href="#"></a>

modal-flat.html

<div id="tooltip-modal" class=""><dl>
    <div class="info">
    <dt>Rate Type:</dt>
    <dd class="with-separator">Flat</dd>
    
        <dt>Basis:</dt>
    <dd>Per Product</dd>
    </div>
    <dt>Items Sold</dt>
    <dd>3</dd>
    <dt>Rate Per Product</dt>
    <dd>10%</dd>
    
<div class="total">
<dt>TOTAL</dt><dd>$14.50</dd></div>
    
    <dt>
</dt></dl></div>

modal-manual.html

<div id="tooltip-modal">
This rate was entered manually by <a href="">username</a>.
<br>
<a href="">View original calculations.</a>
</div>

modal-percentage.html

<div id="tooltip-modal"><dl>
    <div class="info">
    <dt>Rate Type:</dt>
    <dd class="">Percentage</dd>
    
        
    
    </div>
    <dt>Purchase Price:</dt>
    <dd>$145.00</dd>
    <dt>Percengate Paid:</dt>
    <dd>10%</dd>
    
<div class="total">
<dt>TOTAL</dt><dd>$14.50</dd></div>
    
    <dt>
</dt></dl></div>