こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は、以前の記事の更にブラッシュアップ版を紹介します！

◆過去記事はコチラ（【JavaScript】特定のワードにリンクを挿入する、ワードとリンクはJSONで管理）

ツールチップというのはご存知でしょうか。
特定の要素にマウスを合わせると、説明文が表示されるアレです。

そんなツールチップは特定の単語に説明を入れたい場合、非常に役立つので
実装してみました！

実装例

ダミー文です。
狸は音楽の挨拶扉らから顔を置い子たな。するといきなり気の毒たらますという音うまし。まじめますでことたはだするとあとのだめたちのところからはよほど同じましたと、みんなばかり狸をなっれんでた。あき過ぎぼくはざとじぶんのが恐いだてたくさんの風の猫あたりでわらわ第二舌曲のおねがいに叫びてだしやます。一心は一生けん命いえてきた。次は六こめ灰のようへ持たていまし。外も手ゆうべとそれがやめてくるです。おいではゴーシュにとてもにあるからやり直しから光輝のようがどなりつけて下がやぶれてふっとょってじぶんのを云いてやっます。するするぞろぞろ糸をゴーシュに知っませます。
わたしまだにセロをして穴に出しございござい。外にちがいんだ。「愕をいえた。頭、きみを手。なっ。」おまえはいまのときのまもなくひとつのときがやれまします。狸は頭におゴーシュへいけて二つが窓を見てどうしてこんどとりられるますところをありましや。ちらちら話して、とって云いでっますて狸をそれから楽長にぱっとつまみ睡うまし。「曲やっ。
慈悲に弾いまし。弾くな。何はおまえとセロをするてまでちがい兎もむずかしいのたてな。」みんなは粗末そうをくらべてなあ目ぼうからまげたりましろの鳥を飛びつきてぶっつかっだりいうているた。かっこうはけりて肩が思いたまし。
誰もいったいゴーシュはよかっんましが入り口はまた白い気たた。「前のたくさんの兎が。ある。」これもぎっしりのんだます。孔も東にして前まし。ではこんどはぴたっとふくたなら。
ひどいおねがいらしとしので行くてさきがなっようでし自分をいいてだってまるで眼にそうあるましまし。ぴたりかと音楽もてさも持たたですて悪いのをはたくさんは猫のトマトなた。金はみんなを前まし窓のときあなたを落ちですようにな狩足に譜より帰っておまえかかも方をとりていんう。「けれどもいきなり夕方の子。
ぶっつかっ。」はいとしがなっうかといってすこしかっこうをゴーシュからまして来でゴーシュありでした。「正確まし。まるで云いてはじめでし。こういうのもゴーシュの風たのまし。ぼくをそのかなりひるまたら方が。あたり。ごつごつまで何だかぼう一そうも痛くのやな。嵐をセロをなりて来おれげにその猫蚊息と片手げのおっかさんまでの窓ねずみにいろと行きましもっともぼくの面目はすこしき方です。
足ぶんさん。さまにも急いんまいがぞ。ゴーシュというのにがたがたはじめいた。
おどすは鳴っは自分という方でいきなりもっで気まし。ではがらんとそんなにさきの下と教えたはなあ。これだけ何まで鳴った光輝の晩を飛びつきて何の処をおろしておろしようでしのた、笑いな、すこしせてしまいたがな。
小麦出この仲間かっこう家にぼく二寸のなかをぱちんととめておじぎををあけようんことたは、それをはしばらくくたくただてよ。するといまも返事も私まで、鳴らしと十ぺんへはぜひゴーシュを開くて来出し。」どこはおじぎを云いて、すると一心へ思ってまん中が吹き出たりそれかで弾きてきたりぶっつかっなます。キャベジはその同じますホールみたいましゴーシュを走ってゴーシュののを教わっがゴーシュを急いてどうか二つで曲げましまして、東がやめまわってましろまでいるましねずみ夕方はいった所をはじめがセロへは足館とけでまし。このかっこう悪い穴もわたしか狸ますなよしんが済むホールたちをなってまわったん。こどもと思えてはおまえしか床の狸頭ませをはいっ弾いせうまん中かっこうへ、いちども何に思わず一日なてなっと一生はおっかさんのかっこうの大きな口を交響の口をふりまわしたり風車の泣き声から弾いとなって云いすぎをあけてもうやめていといるないものた。口へままに云いてあかりでやぶれのにいまの物すごい音楽をひいたまい。これもそればかります。この一番の活動出う舌んまし。すきはなんで赤のところをけろりと行くが、しばらく外国へゴーシュから云いてセロのねどこへもっとも聞きつけましだろ。
まっゴーシュを来ます。

HTML例

<p id="js-word-target">狸は音楽の挨拶扉らから顔を置い子たな。するといきなり気の毒たらますという音うまし。まじめますでことたはだするとあとのだめたちのところからはよほど同じましたと、みんなばかり狸をなっれんでた。あき過ぎぼくはざとじぶんのが恐いだてたくさんの風の猫あたりでわらわ第二舌曲のおねがいに叫びてだしやます。一心は一生けん命いえてきた。次は六こめ灰のようへ持たていまし。外も手ゆうべとそれがやめてくるです。おいではゴーシュにとてもにあるからやり直しから光輝のようがどなりつけて下がやぶれてふっとょってじぶんのを云いてやっます。するするぞろぞろ糸をゴーシュに知っませます。
わたしまだにセロをして穴に出しございござい。外にちがいんだ。「愕をいえた。頭、きみを手。なっ。」おまえはいまのときのまもなくひとつのときがやれまします。狸は頭におゴーシュへいけて二つが窓を見てどうしてこんどとりられるますところをありましや。ちらちら話して、とって云いでっますて狸をそれから楽長にぱっとつまみ睡うまし。「曲やっ。
慈悲に弾いまし。弾くな。何はおまえとセロをするてまでちがい兎もむずかしいのたてな。」みんなは粗末そうをくらべてなあ目ぼうからまげたりましろの鳥を飛びつきてぶっつかっだりいうているた。かっこうはけりて肩が思いたまし。
誰もいったいゴーシュはよかっんましが入り口はまた白い気たた。「前のたくさんの兎が。ある。」これもぎっしりのんだます。孔も東にして前まし。ではこんどはぴたっとふくたなら。
ひどいおねがいらしとしので行くてさきがなっようでし自分をいいてだってまるで眼にそうあるましまし。ぴたりかと音楽もてさも持たたですて悪いのをはたくさんは猫のトマトなた。金はみんなを前まし窓のときあなたを落ちですようにな狩足に譜より帰っておまえかかも方をとりていんう。「けれどもいきなり夕方の子。
ぶっつかっ。」はいとしがなっうかといってすこしかっこうをゴーシュからまして来でゴーシュありでした。「正確まし。まるで云いてはじめでし。こういうのもゴーシュの風たのまし。ぼくをそのかなりひるまたら方が。あたり。ごつごつまで何だかぼう一そうも痛くのやな。嵐をセロをなりて来おれげにその猫蚊息と片手げのおっかさんまでの窓ねずみにいろと行きましもっともぼくの面目はすこしき方です。
足ぶんさん。さまにも急いんまいがぞ。ゴーシュというのにがたがたはじめいた。
おどすは鳴っは自分という方でいきなりもっで気まし。ではがらんとそんなにさきの下と教えたはなあ。これだけ何まで鳴った光輝の晩を飛びつきて何の処をおろしておろしようでしのた、笑いな、すこしせてしまいたがな。
小麦出この仲間かっこう家にぼく二寸のなかをぱちんととめておじぎををあけようんことたは、それをはしばらくくたくただてよ。するといまも返事も私まで、鳴らしと十ぺんへはぜひゴーシュを開くて来出し。」どこはおじぎを云いて、すると一心へ思ってまん中が吹き出たりそれかで弾きてきたりぶっつかっなます。キャベジはその同じますホールみたいましゴーシュを走ってゴーシュののを教わっがゴーシュを急いてどうか二つで曲げましまして、東がやめまわってましろまでいるましねずみ夕方はいった所をはじめがセロへは足館とけでまし。このかっこう悪い穴もわたしか狸ますなよしんが済むホールたちをなってまわったん。こどもと思えてはおまえしか床の狸頭ませをはいっ弾いせうまん中かっこうへ、いちども何に思わず一日なてなっと一生はおっかさんのかっこうの大きな口を交響の口をふりまわしたり風車の泣き声から弾いとなって云いすぎをあけてもうやめていといるないものた。口へままに云いてあかりでやぶれのにいまの物すごい音楽をひいたまい。これもそればかります。この一番の活動出う舌んまし。すきはなんで赤のところをけろりと行くが、しばらく外国へゴーシュから云いてセロのねどこへもっとも聞きつけましだろ。
まっゴーシュを来ます。</p>

CSS例

.js-tooltip {
    background-color: yellow;
    font-weight: bold;
    color: black;
    position: relative;
}
.js-tooltip > span{
    position: absolute;
    bottom: 26px;
    background: #535353;
    color: #fff;
    padding: 5px;
    width: 150px;
    border-radius: 5px;
    display: none;
    font-size: 11px;
    font-weight: 200;
}
.js-tooltip > span::before{
    content: '';
    position: absolute;
    top: auto;
    bottom: -12px;
    left: 2px;
    box-sizing: border-box;
    width: 10px;
    height: 9px;
    border: 5px solid transparent;
    border-top: 8px solid #535353;
}

JavaScript例

async function highlightKeywordsOnLoad() {
const targetElement = document.getElementById('js-word-target');
if (!targetElement) return;
let keywordsData;
try {
    const response = await fetch('./tooltips.json');
    keywordsData = await response.json();
} catch (error) {
    console.error("Error loading keywords:", error);
    return;
}
function highlightAndLink(element, keywords) {
    keywords.forEach(({ word, text }) => {
    const regex = new RegExp(`(${word})`, 'gi');
    element.innerHTML = element.innerHTML.replace(regex, `<span data-text="${text}" class="js-tooltip"><span>${text}</span>$1</span>`);
    });
}
highlightAndLink(targetElement, keywordsData.keywords);
}
document.addEventListener('DOMContentLoaded', highlightKeywordsOnLoad);
document.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('mouseenter', function (e) {
        if (e.target.classList.contains('js-tooltip')) {
            const childSpan = e.target.querySelector('span');
            if (childSpan) {
                childSpan.style.display = 'inline';
            }
        }
    }, true);
    document.addEventListener('mouseleave', function (e) {
        if (e.target.classList.contains('js-tooltip')) {
            const childSpan = e.target.querySelector('span');
            if (childSpan) {
                childSpan.style.display = 'none';
            }
        }
    }, true);
});

JSON例

{
    "keywords": [
      { "word": "ゴーシュ", "text": "フランス語で「不器用な」という意味があるそうです" },
      { "word": "セロ", "text": "セロとチェロは同じものです" },
      { "word": "トマト", "text": "南米原産ナス科の野菜です。お肌の悩みがあればこれを食べましょう！" }
    ]
}

まとめ

今回もjQueryではなく、Vanilla.jsで実装してみました。

正直なところ完璧ではありません。
予想外のワードにツールチップが挿入される可能性もあるので、
念の為公開前に一度内容に目を通しておくことを強くオススメします。