JSFiddle - React, Tailwind, and code Playground

HTML

<div class="expounder-example">
        <p>
        東京は、江戸幕府の所在地の<span data-expounder="edo">江戸</span><span data-expounded="edo">（※江戸は、日本の首都東京の旧称であり、1603年から1867年まで江戸幕府が置かれていた都市である。)</span>を1868年9月に改称したものである。     </p>
     <p>   
「東京」という名称を用いる構想は江戸時代後期の佐藤信淵の書にあり、大久保利通がその書の影響を受けつつ「東京」とすることを建言した。</p>
<p>
1869年2月11日1878年（明治11年）に府制を施行、「<span data-expounder="tokyo-fu">東京府</span>」<span data-expounded="tokyo-fu">（※東京府（とうきょうふ/とうけいふ）は、1868年（慶応4年、明治元年）から1943年（昭和18年）までの間に存在していた日本の府県の一つであった。現在の東京都の前身に当たる。）</span>となった。</p>
<p>1878年（明治11年）・1880年（明治13年）に伊豆諸島・小笠原諸島を編入。</p>
<p>1889年（明治22年）5月1日には、<span data-expounder="tokyo-15ku">東京15区</span><span data-expounded="tokyo-15ku">（※1932年（昭和7年）に東京市が周辺町村を合併して「大東京市」を構成する以前の、いわゆる旧市域に含まれる15区を指す。その内訳は、麹町区、神田区、日本橋区、京橋区、芝区、麻布区、赤坂区、四谷区、牛込区、小石川区、本郷区、下谷区、浅草区、本所区、深川区である。）</span>を東京府から分立して東京市とした。</p>
   

    </div>

CSS

*[data-expounder] {
    text-decoration: none;
    border-bottom: 1px dashed;
    cursor: pointer;
}

@keyframes expoundedFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

*[data-expounded] {
    display: none;
}

*[data-expounded].expounded-appear {
    display: initial;
    animation: expoundedFadeIn 1s;
    font-size:12px;
    color:red;
}
div{width:100%;}
p{width:80%;margin-bottom:15px;margin-left:auto;margin-right:auto;}

    a,
     *[data-expounder] {
        transition: color .25s ease-in;
        color: blue;
    }

JavaScript

//Copyright (c) 2016 Stavros Korokithakis
//by https://github.com/skorokithakis/expounder
;
(function(global) {

    'use strict';

    var Expounder;

    function expounderFactory() {

        document.addEventListener('DOMContentLoaded', function() {

            var elements = document.querySelectorAll('span[data-expounder]');

            for (var index = 0; index < elements.length; index++) {

                elements[index].addEventListener('click', function(event) {

                    event.preventDefault();

                    var expoundId = this.dataset.expounder;
                    var expounded = document.querySelector('*[data-expounded="' + expoundId + '"]');

                    var parentNode = this.parentNode;
                    var textNode = document.createTextNode(this.textContent);

                    parentNode.replaceChild(textNode, this);

                    expounded.className = "expounded-appear";

                }, false);
            }
        }, false);
    }

    // Export
    Expounder = expounderFactory();

    // AMD
    if (typeof define === 'function' && define.amd) {

        define(function() {
            return Expounder;
        });

        // Node and other CommonJS-like environments that support module.exports
    } else if (typeof module !== 'undefined' && module.exports) {

        module.exports = Expounder;

        // Browser
    } else {
        global.Expounder = Expounder;
    }

})(this);