JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<div class="ql-editor-ready" id="editor_autoria">Ivan Ferrer.<br><br><br>Tesxto de teste para marcar.<br><br><br>Finalizando aqui.<br><br><br><span class="color hightcolor-4" data-id="15487793226465f131e31" id="mark_15487793226465f131e31" data-color="4" data-user="23455" data-date="2019-01-29 14:28:36" data-positions="{}" data-timestamp="1548779316000" data-note="texto 1" data-text="Mussum Ipsum, cacilds vidis litro abertis. Quem num gosta di mim que vai caçá sua turmis! Quem manda na minha terra sou euzis! Casamentiss faiz malandris se pirulitá. Copo furadis é disculpa de bebadis, arcu quam euismod magna.
    Detraxit consequat et quo n" title="texto 1" data-zindex="2" style="z-index: 2;" tooltip-trigger="none" uib-tooltip="texto 1">Mussum Ipsum, cacilds vidis litro abertis. Quem num gosta di mim que vai caçá sua turmis! Quem manda na minha terra sou euzis! Casamentiss faiz malandris se pirulitá. Copo furadis é disculpa de bebadis, arcu quam euismod magna.
    Detraxit consequat et quo n<i class="tabs tab-5"></i></span>um tendi nada. Aenean aliquam <span class="color hightcolor-2" data-id="15487793345955f131e32" id="mark_15487793345955f131e32" data-color="2" data-user="23455" data-date="2019-01-29 14:28:36" data-positions="{}" data-timestamp="1548779316000" data-note="texto 2" data-text="molestie leo, vitae iaculis nisl. Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Per aumento de cachacis, eu reclamis." title="texto 2" data-zindex="3" style="z-index: 0;" tooltip-trigger="none" uib-tooltip="texto 2">molestie leo, vitae iaculis nisl. Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Per aumento de cachacis, eu reclamis.<i class="tabs tab-2"></i></span><br><span class="color hightcolor-1" data-id="15487793421415f131e33" id="mark_15487793421415f131e33" data-color="1" data-user="23455" data-date="2019-01-29 14:28:36" data-positions="{}" data-timestamp="1548779316000" data-note="texto 3"...

CSS

.ql-editor-ready .hightcolor-1,
.ql-editor-ready .hightcolor-2,
.ql-editor-ready .hightcolor-3,
.ql-editor-ready .hightcolor-4,
.ql-editor-ready .hightcolor-5,
.ql-editor .hightcolor-1,
.ql-editor .hightcolor-2,
.ql-editor .hightcolor-3,
.ql-editor .hightcolor-4,
.ql-editor .hightcolor-5 {
   /*display: inline;*/
    /*padding: 4px;*/
   cursor: pointer;
    position:relative;
}
.ql-editor-ready .hightcolor-1:hover,
.ql-editor-ready .hightcolor-2:hover,
.ql-editor-ready .hightcolor-3:hover,
.ql-editor-ready .hightcolor-4:hover,
.ql-editor-ready .hightcolor-5:hover,
.ql-editor .hightcolor-1:hover,
.ql-editor .hightcolor-2:hover,
.ql-editor .hightcolor-3:hover,
.ql-editor .hightcolor-4:hover,
.ql-editor .hightcolor-5:hover {
    opacity:1;
    position:relative;
    z-index: 6000;
}
.color-options ul li {
    float:left;
    cursor: pointer;
}
.color-options .color {
    padding: 15px;
    display: flex;
    border-radius: 80%;
    margin: 10px;

}
.ql-editor-ready .color i.tabs {
    position: relative;
    z-index: 999999;
}
.ql-editor-ready .color>i.tabs:hover {
    z-index:999999;
}
.ql-editor-ready .color i.tabs:after {
    content:"";
    position: absolute;
    z-index: 1;
    width: 24px;
    font-size: 23px;
    display: block;
    top: -72%;
    right: 0%;
    /* margin-left: -110px; */
    border-width: 6px;
    border-style: solid;
    /*border-color: #555 transparent transparent transparent;*/
    transform: rotate(180deg);
    opacity: .8;
}
.ql-editor-ready .color:hover i.tabs:after {
    z-index:999;
}
.ql-editor-ready i.tabs:after:hover {
    z-index:999;
}
.ql-editor-ready .color:hover:after {
    opacity: 1;
}
.ql-editor-ready .color.hightcolor-1 i.tabs:after {
    border-color: #b1c15d transparent transparent transparent;
    border-width: 6px;
    border-style: solid;
}
.ql-editor-ready .color.hightcolor-2 i.tabs:after {
    border-color: #c1796a transparent transparent transparent;
    border-width: 6px;
    border-style:...

JavaScript

$(document)
        .on('mouseover mouseenter hover', '#editor_autoria [data-id]', function(){
            $(this).addClass('selected');
            $(this).css('z-index', 9999999);
        $(this).siblings('[data-id]').css('z-index', 0);

        if($(this).parent().hasClass('color')) {
            $(this).parent().removeClass('selected');
        }

    })
        .on('mouseout mouseleave', '#editor_autoria [data-id]', function(){
            $(this).removeClass('selected');
            $(this).css('z-index', $(this).attr('data-zindex'));
            if($(this).parent().hasClass('color')) {
               $(this).removeClass('selected');
                $(this).parent().css('opacity', '1');
            }

        var irmaos = $(this).siblings();
            irmaos.css('z-index',  irmaos.attr('data-zindex'));
    });

$(document).on('click', '#editor_autoria [data-id].selected', function(event){
            $(this).css('z-index', 9999999);
            $(this).siblings('[data-id]').css('z-index', 0);

            if($(this).parent().hasClass('color')) {
               // $(this).parent().css('pointer-events', 'none');
                $(this).css('pointer-events', 'auto');
            }

            var $target = {};
            $target = this.dataset;
           console.log($target);
           alert(JSON.stringify($target, null, "  "));
});