テキスト内の単語にカーソルを合わせる

外国語のテキストの各単語の20〜30単語の定義を持つホバーポップアップを表示するにはどうすればよいでしょうか？テキスト内の単語にカーソルを合わせる

は、今私は、IFRAME使用しています：

<span class="tooltip">foreign-language-verb 

    <span class="tooltiptext"> 

    2nd pers. sing. past tense, active mood. 

    <iframe class="tooltip" src="general_dictionary_definition_of_the_verb.html"></iframe> 

    </span> 

</span>

それは動作しますが、ページは、その後ロードすることは非常に遅いですが、可能なIFRAMEの数には限界があるようです：彼らはもう表示されません。テキストが長すぎる場合

他の解決方法は、javascriptを使用してテキストなどをロードしますか？

ありがとうございました。

EDIT：リチャード・Pの発言にフォローアップ：その平均値は手でJavaScriptの読み込みではiframeを交換しない、意味を成しているし、ベストプラクティスということでしょうか？それは読み込みに非常に遅いiframeよりも速いでしょうか？は考慮にJavascript - read local text fileを撮影：

<script type="text/javascript"> 
function loadDictionaryDefinitions() 
{ 
    var elements = document.getElementsByClassName("DictionaryDefinition"); 
    for (var i = 0; i < elements.length; i++) 
     elements[i].innerHTML = readTextFile("file://" + elements[i].getAttribute("filename_of_dic_definition")); 
} 

function readTextFile(file) 
{ 
    var rawFile = new XMLHttpRequest(); 
    rawFile.open("GET", file, false); 
    rawFile.onreadystatechange = function() 
    { 
     if(rawFile.readyState === 4) 
     { 
      if(rawFile.status === 200 || rawFile.status == 0) 
      { 
       var allText = rawFile.responseText; 
       alert(allText); 
      } 
     } 
    } 
    rawFile.send(null); 
} 
</script>

および追加：

<body onload="loadDictionaryDefinitions()">

出典

2016-08-19 BanK

あなたのプロジェクトに追加する気にしない場合は、Bootstrapにポップオーバーを使用することができます。それはJavaScriptのビットを必要とするだろうが、非常に簡単にする必要があります。その機能のほとんどはブートストラップによって処理されます。

出典

2016-08-19 16:37:00

おかげで、外librairesを使用して検討したが、これをやったことがない（私はアマチュアプログラマだ）し、問題がある、私は（私はC＃ので生成していていること）、これらすべてのHTMLなどをカプセル化したいですで.CHMヘルプファイル、CHMリーダーがこれでうまくいくかどうかわからないのですか？ – BanK

ポップオーバーにデータを挿入しようとしているのであれば、おそらくjsまたはjqueryを使用して、ポップオーバーのデータコンテンツ属性を設定するだけで済みます。 –

大丈夫、編集した質問はあなたに合っていますか？私は実際にiframeとの違いを見ていない、それは速くなるだろう、それは本当にベストプラクティスですか？それを行うための通常の方法が何であるかはわかりません。 – BanK

何かについてのCSSホバーですか？この方法を試してください。 https://jsfiddle.net/maky/0h0ekhj6/

/* Tooltip container */ 

.tooltip { 
    position: relative; 
    display: inline-block; 
    border-bottom: 1px dotted black; 
    /* If you want dots under the hoverable text */ 
} 


/* Tooltip text */ 

.tooltip .tooltiptext { 
    visibility: hidden; 
    width: 120px; 
    background-color: black; 
    color: #fff; 
    text-align: center; 
    padding: 5px 0; 
    border-radius: 6px; 
    /* Position the tooltip text - see examples below! */ 
    position: absolute; 
    z-index: 1; 
} 


/* Show the tooltip text when you mouse over the tooltip container */ 

.tooltip:hover .tooltiptext { 
    visibility: visible; 
}

出典

2016-08-19 16:38:23 fernando

これはまさに私がやっていることですが、 "the"や "a"（または外国語の同等のもの）のような単語の定義は非常に長くなる可能性があり、その単語は非常に一般的なので、htmlは膨大なものになります。すべてのhtmlのすべての単語に対して定義のテキストを再利用する方法はありますか？私はこのためにiframeを使っていました。 – BanK

テキスト内の単語にカーソルを合わせる

答えて

関連する問題