在沒有控制事件的情況下創建動態工具提示

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/

這是舊的，但工程。而例如使用它的彈出窗口的定義是在這裏（WordPress的不允許腳本）：

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事件處理程序。然後，mouseover處理程序會調用「Load Definitions（）」函數，這個函數通常只是一個大的「case」語句，並且可能需要直接訪問解析的JSON對象。

查看面板管理器中的選項以及mouseover和mouseout事件的用法 - 我將帶有動畫不透明度更改的定義引入其中，但您可以使用大小更改，幻燈片或任何您喜歡的任何內容。

希望這會有所幫助！