/* Hover tooltips */

.hov:hover * {visibility:visible;position:relative;}
.tip         {visibility: hidden;position:absolute;z-index: 1;text-align: center;border-radius: 6px;padding: 5px 0;}

.popup {
  visibility: hidden;
  width:20rem;
  background-color:cornsilk; color:black;
  text-align:center; padding:2px 0;
  border-color:lightgrey; border-style:solid; border-width:1px; border-radius:4px;
  position:absolute;z-index:1; top: 100%; left: 50%; margin-left:-60px;
}

.field-text {color:red;font-size:2rem;}
.field-tip  {position:relative;cursor:help;}
.field-tip:hover .tip-content {right:-20px;opacity:1;}


.field-tip .tip-content {
    position:absolute;
    top:-10px;
    right:9999px;
    width:200px;
    margin-right:-220px;
    padding:10px;
    color:#fff;
    background:#333;
    -webkit-box-shadow:2px 2px 5px #aaa;
            box-shadow:2px 2px 5px #aaa;
    opacity:0;
    -webkit-transition:opacity 250ms ease-out;
       -moz-transition:opacity 250ms ease-out;
        -ms-transition:opacity 250ms ease-out;
         -o-transition:opacity 250ms ease-out;
            transition:opacity 250ms ease-out;
}


/* <http://css-tricks.com/snippets/css/css-triangle/> */
.field-tip .tip-content:before {
    content:' '; /* Must have content to display */
    position:absolute;
    top:50%;
    left:-16px; /* 2 x border width */
    width:0;
    height:0;
    margin-top:-8px; /* - border width */
    border:8px solid transparent;
    border-right-color:#333;
}