Edit in JSFiddle

/*!
 * jQuery FormHelp Plugin v0.1.0
 * https://github.com/invetek/jquery-formhelp
 *
 * Copyright 2013 Loran Kloeze - Invetek
 * Released under the MIT license
 */

(function($) {
    $.formHelp = function() {

        $('span.helptext').each(function() {

            // Grab the inputelement(s) for this helpbox
            var inputelements = $(this).attr('data-for');
            var $inputelements = $(inputelements);

            var $helpbox = $('<div/>')
                .addClass('form-helpbox')
                .attr('data-for', inputelements)
                .append($('<div/>')
                .addClass('content')
                .html($(this).html()));

            $inputelements.last().after($helpbox);

            // Collect elements for calculating position of $helpbox
            var $boundaryElements = $inputelements;
            $inputelements.each(function() {
                $boundaryElements = $boundaryElements.add('label[for="' + $(this).attr('id') + '"]');
            });

            // Calculate top right corner of $boundaryElements and use
            // that value for the position of $helpbox
            var helpboxLeft = 0;
            var helpboxTop = $(document).height();
            $boundaryElements.each(function() {
                var thisLeft = $(this).offset().left + $(this).width();
                var thisTop = $(this).offset().top;
                helpboxLeft = thisLeft > helpboxLeft ? thisLeft : helpboxLeft;
                helpboxTop = thisTop < helpboxTop ? thisTop : helpboxTop;
            });

            $inputelements.on('focus focusin', function() {
                $helpbox.css({
                    'left': helpboxLeft,
                    'top': helpboxTop
                }).fadeIn('fast');
            });

            $inputelements.on('blur focusout', function() {
                $helpbox.fadeOut('fast');
            });

            // There is no textarea resize event so we have to use mousemove            
            $inputelements.filter('textarea').on('mousemove', function() {
                $helpbox.css({
                    'left': $(this).offset().left + $(this).width(),
                    'top': $(this).offset().top
                });
            });

            // The elements that can't be clicked without changing their value or causing 
            // some kind of action. We use the mouseover/mouseout events instead of focus/blur.
            // The focus/blur events are still handled on these element because of the tab key.
            $inputelements.filter('[type="reset"],[type="submit"],[type="checkbox"],[type="radio"],[type="button"],\n\
                    [type="file"],[type="color"],[type="image"],[type="range"]').on('mouseover', function() {
                $(':input').blur();
                $('div[data-for]').fadeOut('fast');
                $helpbox.css({
                    'left': helpboxLeft,
                    'top': helpboxTop
                }).fadeIn('fast');
            }).on('mouseout', function() {
                $helpbox.fadeOut('fast');
            });

            $(this).remove();
        });

    };

}(jQuery)); 

 $.formHelp();

body {
    font-family: verdana;
    padding: 0;
    font-size: 11px;
}

hr {
    border-top: solid 1px black;
    border-bottom: none;
    margin: 10px 0 25px 0;
}

table {
    border-collapse: collapse;
}

tr:first-child td {
    border-top: solid 1px #CCC;
}

td {
    padding: 10px;
    border-bottom: solid 1px #CCC;
}

td:first-child {
    font-weight: bold;
    text-align: left;
    width: 200px;
    padding: 10px;
}

.contentwrapper {
    margin: 50px 0 0 200px;
    width: 800px;
}
.form-helpbox {
    position: absolute;
    margin: 0 0 0 25px;
    padding: 0 0 0 15px;
    background-image: url('arrow_left.png');
    background-position: left 3px;
    background-repeat: no-repeat;
    display: none;
}

.form-helpbox .content {
    padding: 5px 10px 10px 5px;
    background-color: #e0bd52;
    width: 125px;
    color: #333;
    border: solid 1px #222;
    border-radius: 3px;
    box-shadow: 1px 1px 3px #222;
    opacity: 0.95;
}

 <form id="sampleform">
                <table>
                    <tr>
                        <td><label for="input-name">Input type=text</label></td>
                        <td>
                            <input id="input-name" type="text"/>
                            <span class="helptext" data-for="#input-name">
                                名前とかを書いてね。<br> <b>太文字</b>とかも出来る
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td><label for="input-email">Input type=email</label></td>
                        <td>
                            <input id="input-email" type="email"/>
                            <span class="helptext" data-for="#input-email">
                                <p>ツールチップは <b>html</b>を自由に使えます。</p>
                                <hr>リストとか。
                                <ul>
                                    <li>foo</li>
                                    <li>bar</li>
                                    <li>hoge</li>
                                </ul>
                                    <hr><p>画像とか。</p>
                                    <img src="http://placekitten.com/130/100">
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td><label for="input-date">Input type=date</label></td>
                        <td>
                            <input id="input-date" type="date"/>
                            <span class="helptext" data-for="#input-date">
                                こういうのはフォーカス時にツールチップが出るようになっています。
                            </span>
                        </td>
                    </tr>
                                       
               
                </table>
            </form>