JSFiddle - React, Tailwind, and code Playground

by sachips

HTML

<form id="sampleform">
    <table>
        <tr>
            <td><label>Input text</label></td>
            <td>
                <input type="text" id="your-name">
                <span class="helptext" data-for="#your-name">
                    ここにヘルプを書きます。<br>
                    HTMLも書くことができます。<br>
                    例えばリストとか
                    <ul>
                        <li>hoge</li>
                        <li>hoge</li>
                    </ul>
                </span>
            </td>
        </tr>
</form>

CSS

.form-helpbox {
    position: absolute;
    margin: 0 0 0 30px;
    display: none;
}
.form-helpbox .content {
    padding: 5px 10px 10px 5px;
    background-color: #0099cc;
    width: 200px;
    color: #FFF;
    font-size: 12px;
    line-height: 1.4;
    border-radius: 0.5em;
    box-shadow: 1px 1px 3px #ccc;
    opacity: 0.95;
}

JavaScript

/*!
 * 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            
         ...