JSFiddle - React, Tailwind, and code Playground

by Hidayat Rifan

HTML

<h2 class="splitWord">abcd efg</h2>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
    <br /><span class="splitWord">abcdefg tincidunt</span> ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

CSS

body {
    padding:100px 50px;
}
.chord-tooltip {
    font-family: Candara, Tahoma, Geneva, sans-serif;
    outline: medium none;
    cursor: help;
    position: relative;
    color:#0C0
}
.chord-tooltip:hover, .chord-bb:hover, .chord-acis:hover, .chord-gcis:hover, .chord-dcis:hover {
    color:#0F0
}
.chord-tooltip:hover:after {
    top: -105px;
    background-color: #FFF;
    font-size: 14px;
    color: #666;
    content:"";
    display: block;
    left: 0px;
    position: absolute;
    white-space: nowrap;
    border-radius: 3px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
    background-image: url('http://3.bp.blogspot.com/-HoPd6dJCuTw/T3mywnAzfgI/AAAAAAAAAYw/HVALDTsAt98/s1600/mo.jpg');
    background-repeat: no-repeat;
    height: 95px;
    width: 72px;
    background-position: 0 0;
}
.chord-tooltip:hover:before {
    top: -10px;
    left: 2px;
    border-style: solid;
    border-image: none;
    border-color: #FFF transparent;
    border-width: 10px 10px 0px;
    content:"";
    display: block;
    position: absolute;
    z-index: 1;
}
.chord-g:hover:after {
    background-position: -11px -609px;
}
.chord-f:hover:after {
    background-position: -11px -467px;
}
.chord-e:hover:after {
    background-position: -11px -322px;
}
.chord-d:hover:after {
    background-position: -11px -180px;
}
.chord-c:hover:after {
    background-position: -11px -36px;
}
.chord-b:hover:after {
    background-position: -11px -892px;
}
.chord-a:hover:after {
    background-position: -11px -752px;
}
.splitWord {
    position:relative
}
.splitWord .char1 {
    color:red;
}
.splitWord .char2 {
    color:green;
}
.splitWord .char3 {
    color:blue;
}
.splitWord .char4 {
    color:yellow;
}
.splitWord .char5 {
    color:orange;
}
.splitWord .char6 {
    color:yellowgreen;
}
.splitWord .char7 {
    color:cyan;
}
.splitWord .char8 {
    color:gold;
}
.splitWord .char9 {
    color:pink;
}
.splitWord .char10 {
    color:magenta;
}

JavaScript

$('.splitWord').children().andSelf().contents().each(function () {
    if (this.nodeType == 3) {
        $(this).replaceWith($(this).text().replace(/(\w)/g, "<span class='char chord-tooltip chord-$&'>$&</span>"));
    }
});

$('.splitWord').each(function () {
    $('span.char', this).each(function (i) {
        i = i + 1;
        $(this).addClass('char' + i);
    });
});

$('div.post-body').each(function () {
    $(this).find('span').addClass('kunci_ndes');
});