Demo.html

<html>
<head>
    <title>jQuery Form Input Hints Plugin Demo</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript" src="jquery.inputhints.js"></script>

    <style>
        input
        {
            height: 32px;
            padding: 4px 6px;
            font-size: 14px;
            line-height: 20px;
        }
        input.hint
        {
            color: #888;
        }
    </style>

    <script type="text/javascript">
        $(function () {
            $('input[placeholder]').inputHints();
        });

    </script>

</head>
<body>
    <h1>
        jQuery Form Input Hints Plugin Demo</h1>
    <a href="https://github.com/robvolk/jQuery.InputHints">Github project</a> | <a
        href="http://blog.robvolk.com/2009/01/jquery-form-input-hints.html">Project Blog
        Post</a>
    <h2>
        Example</h2>

    <form>
    <input type="text" placeholder="Hint Text!" />
    </form>

    <h2>
        Usage</h2>

    <pre>
&lt;script type="text/javascript"&gt;
$(function () {
    // hook up placeholder text on any input with a placeholder attribute
    <span style="background-color: yellow;">$('input[placeholder]').inputHints();</span>
});
&lt;/script&gt;

&lt;style&gt;
input.hint { color: #888; }
&lt;/style&gt;

&lt;input type="text" placeholder="Hint Text!" /&gt;
</pre>

</body>
</html>