在没有控制事件的情况下创建动态工具提示

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事件的用法 - 我将带有动画不透明度更改的定义引入其中，但您可以使用大小更改，幻灯片或任何您喜欢的任何内容。

希望这会有所帮助！