配列onclickの表示要素

Question

このコードでは、すべての単語を文章に書式設定してからHTMLに書式設定してJSONファイルの内容を表示します。マウスオーバーすると、単語は青色になります。クリックすると赤くなります。次は、（json配列の）単語の翻訳をonclickで表示することです。

https://jsfiddle.net/ve64qvtm/

var json = [ 
    [ 
     ["Peki", "Well"], 
     ["nedir", "what"], 
     ["bu", "it"], 
     ... 
    ] 
    ]; 
    var arr2 = []; 
    for (k = 0; k < json.length; k++) { 
    var arr = json[k]; 
    arr2.push('<p>'); 
    for (i = 0; i < arr.length; i++) { 
     if (arr[i][0].length == 1) { 
     arr2.push(arr[i][0]); 
     } else { 
     arr2.push(' <span class="notclicked word ' + i + '">' + arr[i][0] + '</span>'); 
     } 
    } 
    arr2.push('</p>'); 
    } 
    document.getElementById("text").innerHTML = arr2.join(''); 

    var words = [...document.getElementsByClassName("word")]; 
    words.forEach(function(word) { 
    word.onclick = function() { 
     if (word.className == "clicked") { 
     word.className = 'notclicked'; 
     } 
     if (word.className == "onmouse") { 
     word.className = 'clicked'; 
     } 
    } 
    word.onmouseover = function onMouse() { 
     if (word.className != "clicked") { 
     word.className = 'onmouse'; 
     } 
    } 
    word.onmouseout = function onMouse() { 
     if (word.className != "clicked") { 
     word.className = 'notclicked'; 
     } 
    } 
    }); 

私は表示するテキストを変数であるとしてこれを行う方法は考えています。 どうすればいいですか？

Answer 1

Twitterブートストラップの使い方はどうですか？tooltip jQueryを追加し、JSとCSSをブートストラップします。

Here is a working example

編集3：更新されたリンク - このすべてが追加されたら、あなたは何か

arr2.push(' <span class="notclicked word ' + i + '" data-toggle='tooltip' data-placement='top' title='YOUR_TRANSLATION_HERE'>' + arr[i][0] + '</span>');

ようEDIT 2にライン

arr2.push(' <span class="notclicked word ' + i + '">' + arr[i][0] + '</span>');

を編集する必要があります

また、スペースがないので、ツールチップから予期せぬ動作が発生しないように、上下に余白を追加します。