JSFiddle - React, Tailwind, and code Playground

by prayerslayer

HTML

<div class="uberparent">
<div class="parent">
    <input type="button" value="Click me" class="help" />
    <div class="nested">
        <label for="urcool">YOU ARE SO COOL</label>
        <input type="checkbox" id="urcool" value="urcool" class="help" checked />
    </div>
    <input type="date" class="help"/>
    <input type="image" width="50" height="auto" src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-yellow-icon.png" class="help" />
        <div class="help">imma help button too</div>
    <span class="help">what about me?</span>
    </div>
</div>

CSS

.help-img {
    width: 20px;
    height: auto;
    position: absolute;
    border: 1px solid red;
    cursor: pointer;
}

JavaScript

var qmark = "http://b.dryicons.com/images/icon_sets/handy_icons_set/png/128x128/question_mark.png";

$( document ).ready( function() {
    var img = document.createElement( "img" )
    $( ".help" ).each( function() {
        var img = document.createElement("img");
        var offset = $(this).offset();
        var width = $(this).width();
        var height = $(this).height();
        var that = this;
        img.src = qmark;
        $( img ).addClass( "help-img" );
        $(this).append( img );
        //$( img ).css( "top", offset.top );
        //$( img ).css( "left", offset.left  + width +20 );
        $( img ).click( function( evt ) {
            console.log( that );
        });
    });
});