コントロールイベントのない動的なツールチップを作成する

Question

誰でもこれを経験したことがあるのだろうか。

私は純粋なhtmlでいくつかの略語を持つプレーンテキストを持っています。今私はホバーポップアップをこれらの上に行くことができるかどうか疑問に思っています。これらのホバーのデータは既に配列としてJSONに保存されています。既に作成しているがリンクできない関数を呼び出す準備ができています。

とにかく私はCSSでこれを行うことができますか？

サンプルコード：

JSON：

[{"Title":"DALE","FullName":"Dynamic Alternative Learning Environment"},{"Title":"EU15","FullName":"EU-15: Austria, Belgium, Denmark, Finland, France, Germany, Greece, Ireland, Italy, Luxembourg, the Netherlands, Portugal, Spain, Sweden and the United Kingdom"}] 

HTML：

<p class="normal"><u class="abbreviation">EU15</u> countries, however, there are high rates of avoidable mortality and low levels of <u class="abbreviation">DALE</u>. Also Portugal is among the countries in Europe with the highest prevalence of <u class="abbreviation">HIV</u>This chapter also provides details of the health status of the population in order to understand the specific challenges the health system faces. Considerable health improvements can be seen in recent decades. The mortality rate declined more than 0.8 percentage points since 1975. This trend reflects both improved access to an expanding health care network, thanks to continued political commitment, and economic growth, which led to improved living standards and increasing investment in health care. Despite the overall improvements, there are inequalities in health among the regions and between social groups. Since the mid 1980s, the main causes of death have been diseases of the circulatory system, cerebrovascular disease and malignant neoplasms. These are likely to remain the main causes of death of the Portuguese population for the coming decades. Relative to other infection.</p> 

Answer 1

それはあなたが望むもののためにやり過ぎかもしれないが、私はここに私のパネルマネージャでこのような何かをした：

http://depressedpress.com/javascript-extensions/dp_panelmanager/

古いですが動作します。そして、ポップアップの定義のためにそれを使用する例は、（ワードプレスは、スクリプトを許可していません）ここにある：

http://home.comcast.net/~kiwidust/JSExtensions/DP_PanelManager/Example4.htm

そのページの実際のHTMLはあなたのようにたくさん見える：

<p>The <a name="Def">Wii</a> allows you to download games via the "Store" channel from the <a name="Def">Wii</a> main menu. The <a name="Def">PlayStation 3</a> provides a similar service via <a name="Def">PSN</a> while the <a name="Def">XBox 360</a>, as always, has <a name="Def">XBL</a>.</p> 

機能」 init（） "（onloadイベントでロード）は、すべての" Def "名を検出します。私はgetElementsByNameを使用しました。getElementsByClassNameを使用して要素を収集します。各要素に対して、mouseoverイベントハンドラとmouseoutイベントハンドラを追加します。マウスオーバーハンドラは、定義を含む大文字の "case"ステートメントのほとんどである "Load Definitions（）"関数を呼び出します（解析されたJSONオブジェクトに直接アクセスしたいと思うかもしれません）。

マウスオーバーイベントとマウスオーバーイベントのパネルマネージャーのオプションと使用方法を見てください - アニメーション不透明度の変更を含む定義を取り込みますが、サイズ変更、スライドなどを使用することができます。

希望すると便利です。