pop-up/mouse over definitions.

[Sirisha Reddy]

Hello guys
I am trying to implement mouse-over definitions for our website and interested in knowing the best practice for implementing such a thing. it is basically a definition popping up when you move the mouse over a technical term ... the definition comes from glossary.

Is there xml way to implement it.. defining glossary in xml file
Thanks,
Greg Valenti.
SCJP

[William Brogden]

Browser-side actions like that are accomplished with JavaScript - I suggest that you first get it working with static HTML/javascript, then worry about generating pages with JSP.
Bill

[Bear Bibeault]

Javascript may not be necessary. On the client-side you can use any of the following HTML mechanisms:

<acronym title="The description of the acronym">Acronym</acronym>
<abbr title="The description of the abbreviation">Abbreviation</abbr>
<span title="The description of the span">Span</span>
  

The advantage of using acronym or abbr over a simple span is that it makes them easy to style using a tag selector.

On the dynamic front, you did not mention how your definitions are stored. In any case, I'd create a custom action (tag) that would accomodate your back-end needs.

For example, if your descriptions were off in a properties file, a tag along the lines of:

<xyz:term descriptionKey="whatever">new term</xyz:term>

could take the value of the descriptionKey attribute (in this case 'whatever') and look it up as a property, and then emit the appropriate acronym or abbr tag as appropriate.

If the title attribute mechanism on these tags is not sufficient for your needs -- for exaple, if your descriptions are very long or require precise styling -- then Javascript and floating divs is the way you will have to go.
[ November 10, 2004: Message edited by: Bear Bibeault ]

[Sirisha Reddy]

Will,
I tried with javascript but it resulted in performance problems. As there are so many terms that it has to deal with.

and Mr.Bear i am trying to implement your version.. could you eloborate on it and how it is a performance saver.

Thanks a bunch.
Ramesh.

[Jayesh Lalwani]

huh?? we use javascript and DHTML to do popups all the time, and we never have any performance problems. Try looking at this implementation tool tip. It works pretty well for me!!

[Sirisha Reddy]

Jayesh,
I looked at the link .. it looks like all the words and definitions/tips are in the same page.

What if I maintain a glossary file(xml or db) as a seperate file and when ever a word in the glossary appears on any page in the website.. it should automatically appear with a tooltip when mouse is hovered above it. In that way.. so that any changes in glossary file will be reflected in the website.

Please let me know if you have implemented such a functionality. Thank you.

SR.

[Jayesh Lalwani]

Sure!! many times!! What you need to do is have your backend code(Struts action or whtever) retreive the data for the tooltip and pass the data as a request attribute to your jsp page. The Jsp page can then generate the DIV tags for the tool tips. This would be the standard way of doing things

I suspect that your performance issues are because of something else in your code. Are you populating the HTML page with a lot of data and trying to filter out the data on the client side. As long as your page is not too congested, using DIV tags would pretty much give the best performance. Make sure that your backend code does all the filtering of the data. Once you are able to give the proper data to your JSP, then use javascript to add dynamic features like tooltips etc

Jayesh

[Patrick Tsang]

Just retrieve whatever data you wanna display in the jsp page(Imagine you will show it in textarea, but, save it in a hidden object this time). When the mouse moveover event is executed, call the javascript to pass the hidden value as the tips. Just my 2 cents.