JSFiddle - React, Tailwind, and code Playground

by mgibsonbr

HTML

<div id="rootpane">
    <span class="ajuda" id="ajudaInput">
            Entre aqui com um texto.<br/><br/>
            Cada caractere que você digitar fará com que o valor atual da caixa de texto seja exibido logo abaixo, em uma nova linha.<br/><br/>
            Ao clicar nessa linha, o valor da mesma será exibido num alert.<br/><br/>
            <a id="mostraButton" href="#">Próximo</a>
        </span>
 <span class="ajuda" id="ajudaButton">
            Ao clicar aqui, um alert será exibido com a palavra "Button".
        </span>

    <input />
    <button>Teste</button> <a id="ajuda" href="#">Ajuda</a>
 <span id="log"></span>

</div>

CSS

.ajuda {
    background-color: lightgray;
    opacity: 0.8;
    position: fixed;
    z-index: 1;
    width: 300px;
    height: 200px;
    display: none;
}

JavaScript

$("input").bind("input", function () {
    var val = $(this).val();
    $("<p>" + val + "</p>").appendTo($("#log")).click(function () {
        alert(val);
    });
});

$("button").click(function () {
    alert('Button');
});

var aceita = $("input")[0];
$("#ajuda").one("click", function (e) {
    e.preventDefault();

    function seletivo(e) {
        // Não bloqueia nada dentro da ajuda em si
        if ( $(".ajuda").find(e.target).length )
            return;
        // Bloqueia tudo, menos o elemento em foco
        if (e.target !== aceita) {
            e.preventDefault();
            e.stopPropagation();
        }
    }
    $("#rootpane")[0].addEventListener("keydown", seletivo, true);
    $("#rootpane")[0].addEventListener("click", seletivo, true);

    var pos = $("input").position();
    $("#ajudaInput").css({ top:pos.top + 30, left:pos.left }).show();
});

$("#mostraButton").click(function(e) {
    e.stopPropagation();
    $("#ajudaInput").hide();
    
    aceita = $("button")[0];
    var pos = $("button").position();
    $("#ajudaButton").css({ top:pos.top + 30, left:pos.left }).show();
});