Alister West

home is where your code is ...

HTML Contextual help

HTML form helper icon .help-icon using tool-tip.

See "contact form":http://alisterwest.com/contact/ for a demonstration.

<!-- http://flowplayer.org/tools/index.html -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
    .help-icon {
        display: inline-block;
        width: 14px; height: 14px;
        background: url(/images/icons.png) no-repeat 0 -27px;
        margin-left: .25ex;
        text-indent: -9999em;
        overflow: hidden;
        vertical-align: top;
    }
    .help-tip { max-width: 300px; }
    .tooltip {
        display: none;
        background: #fff;
        padding: 10px 10px 10px 10px;
        border: 1px solid #ccc;
        border-radius: 8px;
        box-shadow: 4px 4px 10px #ccc;
    }
    .tooltip h4 { margin-top: 0; color: #6397cb; }
</style>
<label>What is best in life: <input>
    <a href="#" class="help-icon" title="To defeat your enemies, ...">?</a>
</label>
<script>
    $('.help-icon[title]')
        .click(function() { return false; })
        .tooltip({ position:'center right', offset:[0,5],
                   delay:250, tipClass:'tooltip help-tip'});
</script>
By Alister West