Pure CSS Tooltips

Simple tooltips using just CSS. Based on this Fiddle: http://jsfiddle.net/q46Xz/1057/

by Matthew Schenker

HTML

<ul>
    <li class="tooltipcode"><span class="tooltip">Content 1</span>Pooh Bear</li>
    <li class="tooltipcode"><span class="tooltip">Content 2</span>Alexander Beetle</li>
</ul>

CSS

.tooltipcode:hover .tooltip {
    display: block;
}


.tooltip {
    display: none;
    background: #ccc;
    padding: 3px;
    position: absolute;
    margin-left: 50px;
    border-radius: 5px;
}