JSFiddle - React, Tailwind, and code Playground

by Gabriele Petrioli

HTML

<script src="https://raw.github.com/davatron5000/Lettering.js/master/jquery.lettering.js"></script>
<strong>by word</strong>
<div class="mycooldiv words">bunch of text is in here and for example some # and some other cool #</div>

<strong>by letters</strong>
<div class="mycooldiv letters">bunch of text is in here and for example some # and some other cool #</div>

<div id="position"></div>

CSS

.mycooldiv{position:relative;margin-bottom:30px;margin-left:20px;}
#position{
    margin-top:20px;
    padding:10px;
    border:1px solid #ccc;
    font-size:12px;
    font-family:arial;
}
.active{background-color:red}

JavaScript

var $pos = $('#position');

$('.mycooldiv.words')
    .lettering('words')
    .delegate('span', 'mouseover', function(e){
        var self = $(this);
        var position = self.position();
        
        self.addClass('active');
        $pos.text('x:' + position.left+ ', y:' + position.top)
    })
    .delegate('span', 'mouseout',  function(e){
        var self = $(this);
        self.removeClass('active');
    });


$('.mycooldiv.letters')
    .lettering()
    .delegate('span', 'mouseover', function(e){
        var self = $(this);
        var position = self.position();
        
        self.addClass('active');
        $pos.text('x:' + position.left+ ', y:' + position.top)
    })
    .delegate('span', 'mouseout',  function(e){
        var self = $(this);
        self.removeClass('active');
    })