JSFiddle - React, Tailwind, and code Playground

by bubu

HTML

<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>

<div id="test1"><h2>Test 1, Simple</h2>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
</div>

<div id="test2"><h2>Test 2, Advanced</h2>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
</div>

<div id="test3"><h2>Test 3, Scripting + Advanced</h2>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
<p>Ho<span title="E/G#">san</span><span title="A">na</span>, ho<span title="B">san</span><span title="C#m">na</span>, Ho<span title="A">san</span>na in the <span title="C#m">high</span><span title="B">est</span></p>
</div>

CSS

#test1 p {
    line-height: 1em;
    margin: 1.5em 0 0 0;
}
#test1 p > span::before {
    content: attr(title);
    position: absolute;
    top: -0.8em;
    min-width: 100%;
    text-align: center;
    line-height: 1em;
    color: red;
    font-family: sans-serif;
}
#test1 p > span {
    position: relative;
}
/* Advanced */
#test2 span[title] {
    display: inline-block;
}
#test2 span[title]::before {
    content: attr(title);
    display: block;
    text-align: center;
    color: red;
    font-family: sans-serif;
    margin-bottom: -.3em;
}
/* Scripting */
#test3 p > span.chordbox {
    display: inline-block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAYAAAAc2cSCAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEFRkZBjxs4QAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABJSURBVBjTY/j/79v/Z7cf/f/05/9/BiggVozh6WLn/2wMDP+1m6/+//kfIkGsGBOHqAKDJIswg4IMDwMTA0MRAwMDA7FiQxQAANecRNNXT9NzAAAAAElFTkSuQmCC) repeat-x right bottom;
}
#test3 p > span.chordbox > span:first-child {
    display: block;
    text-align: center;
    color: red;
    font-family: sans-serif;
    margin-bottom: -.3em;
}
#test3 p > span.chordbox > span:last-child {
    display: inline-block;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAGCAYAAAAc2cSCAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AwEFRk1NOQAAgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAXSURBVBjTY/z///9/BjIBEwMFYCRqBgCynwQIlIu08QAAAABJRU5ErkJggg==) repeat-x right bottom;
}

JavaScript

$("#test3 p > span[title]").replaceWith(function() {
    return '<span class="chordbox"><span>'+ $(this).attr('title') +'</span><span>'+ $(this).text() +'</span></span>'
});