JSFiddle - React, Tailwind, and code Playground

by Piotr Zalewa

HTML

<form class="style" name="newUser" id="formNewUser" action="#" method="post" enctype="multipart/form-data">
    <fieldset>
        <legend>Account Details</legend>
        <ol>
            <li>
                <label for="username">Username <em>*</em></label>
                <input type="text" class="inputtext medium" id="username" value="" name="username" />
                <p class="helper">At least 6 characters long </p>
            </li>
            <li>
                <label for="password">Password <em>*</em></label>
                <input type="password" class="inputtext medium" id="password" value="" name="password" />
                <p class="helper">At least 6 characters long</p>
            </li>
        </ol>
    </fieldset>
</form

CSS

.helper{
    position: absolute;
    right: 0;
}

JavaScript

//myClass
var formHelp = new Class({
    Implements: Options,
    options: {
        descriptionElements: 'p',
        descriptionClass: 'helper'
    },
    initialize: function(container, options) {
        this.container = $(container);
        this.setOptions(options);
        this.descriptions = this.container.getElements(
            this.options.descriptionElements + '.' + 
            this.options.descriptionClass);
        this.inputs = [];
        this.attach();
    },
    attach: function() {
        this.descriptions.each(function(desc, index) {
            this.inputs[index] = desc.getPrevious();
        }, this);
        this.inputs.each(function(input, index) {
            input.addEvent('focus', function() {
                this.toggleHint(index);
            }.bind(this));
            input.addEvent('blur', function() {
                this.toggleHint(index);
            }.bind(this));
        }, this);
    },
    toggleHint: function(index) { /*this.descriptions[index].slide('toggle');*/
        console.log(this.descriptions[index]);
        alert('fuck');
    }
});

var myFormHelp = new formHelp($('formNewUser'));