• HTML
• CSS
• JS

HTML

<div x-data="toggle()">
    <button class="btn" @click="open" x-text="title"></button>
    <div class="msj" x-show="show" x-on:click.away="close" style="display:none;">
        Alpine.js le ofrece la naturaleza reactiva y declarativa de grandes marcos como Vue o React a un costo mucho menor.
    </div>
</div>

CSS

*{
    box-sizing:border-box;
    font-family:sans-serif;
}

.btn{
    background:#2ecc71;
    color:white;
    border:none;
    padding:0.5rem;
    cursor:pointer;
}
.msj{
    position:absolute;
    background:#f2f3f4;
    border:1px solid #eee;
    width:auto;
    height:auto;
    padding:0.5rem;
    margin-top:0.5rem;
}

JS

function toggle(){
    return {
        show:false,
        title:'Abrir mensaje',
        open(){
            this.show = true; 
            this.title='Cerrar mensaje'
        },
        close(){
            this.show = false;
            this.title= 'Abrir mensaje'
        }
    }
}