Pure CSS hover tooltips

Tidy little CSS hover tooltips, no JS required.

by Ali Khaled

HTML

<span class="field-tip boardindex_themefitted_board_underbar_content">
   <a class="ab" href="http://liveauction360.com/all-lots.html">🆕 NEW Beta Search </a>
    <span class="tip-content">Click Here to Try our New Beta Search </span>
</span>

CSS

.boardindex_themefitted_board_underbar_content
{   
   
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    font-size: 13px;
    font-family: Arial;
    color: #373737;
    padding: 0 14px;
}
.ab{
  text-decoration: none;
}
/* Hover tooltips */
.field-tip {
    position:relative;
    cursor:pointer;
}
    .field-tip .tip-content {
        position:absolute;
        top:-10px; /* - top padding */
        right:9999px;
        width:200px;
        margin-right:-220px; /* width + left/right padding */
        padding:10px;
        color:#fff;
        background:#333;
        -webkit-box-shadow:2px 2px 5px #aaa;
           -moz-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;
                        font-size: 11px;

        }
        .field-tip:hover .tip-content {
            right:-20px;
            opacity:1;
            font-size: 9px;
        }