Question

Just wondering if anyone has experience with this.

I have a plain text in pure html with some abbreviations. Now I’m wondering if I can have a hover popup when going over these. The data for these hovers is already stored in JSON as an array, ready to be pulled with a function I’ve already created but can’t link.

Anyway I can do this through CSS?

Sample code:

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

It might be overkill for what you want but I did something like this with my panel manager here:

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

It’s old but works. And example of using it for popups definitions is here (WordPress doesn’t allow script):

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

The actual HTML on that page looks a lot like yours:

<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>

The function “init()” (loaded with the onload event) finds all of the “Def” names – I used getElementsByName, you’d use getElementsByClassName to collect the elements. For each element it adds the mouseover and mouseout event handlers. The mouseover handler then calls the “Load Definitions()” function which is mostly just a big “case” statement with the defintions (you’d probably want to access the parsed JSON object directly).

Look through the options on the panel manager and the usage in the mouseover and mouseout events – I’m bringing in the definitions with animated opacity changes but you can use size changes, slides or whatever you like pretty easily.

Hope this helps!