Sleek CSS Ordered List Styles with Tool-Tips

Modern and interactive, includes a nice mouse-over Tool-Tip

HTML

<ol class="rectangle-list">
    <li><a href="">List item</a></li>
    <li><a href="" square-tooltip="I'm a Square Tool-Tip!">List item with a Tool-Tip</a>
        <ol>
            <li><a href="">List sub item</a></li>
            <li><a href="" square-tooltip="I'm a Square Tool-Tip Too!!">List sub item with another Tool-Tip</a></li>
        </ol>
    </li>
    <li><a href="" square-tooltip="Add as Many as You Like...">List item with Yet Another Tool-Tip</a></li>
    <li><a href="">List item</a></li>            
</ol>

CSS

body {
    background: url("http://jenniferperrin.com/image/background.gif");
    margin: 30px auto;
    width: 600px;
}

/* -------------------------------------- */

ol {
    counter-reset: li;
    list-style: none;
    *list-style: decimal;
    font: 15px 'trebuchet MS', 'lucida sans';
    padding: 0;
    margin-bottom: 3em;
    text-shadow: 0 1px 0 rgba(34,34,34,.5);
}

ol ol {
    margin: 0 0 0 2em;
}

/* -------------------------------------- */            

.rectangle-list a {
    position: relative;
    display: block;
    padding: .4em .4em .4em .8em;
    *padding: .4em;
    margin: .5em 0 .5em 2.5em;
    background: #222;
    color: #efefef;
    text-decoration: none;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;    
}

.rectangle-list a:hover {
    background: #444;
}    

.rectangle-list a:before {
    content: counter(li);
    counter-increment: li;
    position: absolute;    
    left: -2.5em;
    top: 50%;
    margin-top: -1em;
    background: #bf4c24;
    height: 2em;
    width: 2em;
    line-height: 2em;
    text-align: center;
    font-weight: bold;
}

.rectangle-list a:after {
    position: absolute;    
    content: '';
    border: .5em solid transparent;
    left: -1em;
    top: 50%;
    margin-top: -.5em;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    -ms-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;                
}

.rectangle-list a:hover:after {
    left: -.5em;
    border-left-color: #bf4c24;                
}

/* ------------ -TOOL TIP STYLES- ----------------- */

.square {
    position: relative;
    display: inline-block;
    cursor: help;
    white-space: nowrap;
}

.tooltip-square {
    opacity: 0;
    visibility: hidden;        
    font: 15px 'trebuchet MS', 'lucida sans';
    color: #efefef;   ...

JavaScript

$(document).ready(function() {

    // Square Tool-Tips
    $('[square-tooltip]').addClass('square');
    $('.square').each(function() {
        $(this).append('<span class="tooltip-square">' + $(this).attr('square-tooltip') + '</span>');
    });

    if ($.browser.msie && $.browser.version.substr(0, 1) < 7) {
        $('.square').mouseover(function() {
            $(this).children('.tooltip-square').css('visibility', 'visible');
        }).mouseout(function() {
            $(this).children('.tooltip-square').css('visibility', 'hidden');
        })
    }
});