Droid Input

by Pedro Walter

HTML

<input type="text" data-role="none" placeholder="Insert Text..." tooltip="Help Text" class="droid_input" />

CSS

.droid_input {
    border-bottom: #DFDFDF;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    margin-left: 3em;
    margin-top: 3em;
    margin-right: 3em;
}
.droid_input input {
    border: none;
    outline: none;
    background-color: transparent;
    width:100%;
}
.droid_input img {
    height: 1em;
    float: right;
    position: fixed;
    right: 3em;
    padding-top: 0.2em;
}

JavaScript

$(".droid_input").each(function () {
    var tooltip = $(this).attr("tooltip");
    $(this).wrap("<div class='droid_input'></div>").removeClass("droid_input");
    console.log(tooltip);
    if (tooltip != "") {
        $('<img src="http://icons.iconarchive.com/icons/icons8/ios7/256/Very-Basic-Help-icon.png"/>')
            .appendTo($(this).parent())
            .on('click', function (tooltip) {
            var tooltip = $(this)
                        .parent()
                        .children("input")
                        .attr("tooltip");
            popup = $('<div data-role="popup" ' +
                'data-overlay-theme="b" ' +
                'data-theme="a" ' +
                'data-transition="flip" ' +
                'data-tolerance="15"' +
                '><p>' + tooltip + '</p>' +
                '</div>')
                .appendTo($.mobile.activePage)
                .popup();
            popup.popup("open");
        });
    }
})