Question

I have an interface with a listview of various options e.g 1)Asian 2) Euorpian 3)…… this listview is populated by calling JSP script that accesses this data (i.e. all 3 or more options) from database. I want to have a small popup window (like any help window) to be displayed when I move mouse over( onmousemove function) any option. e.g when i put mouse over Asian then a small help sort of window display Indians,chinese,thai…etc. This data Indians, chinese…. comes again by calling a jsp file since the related information is stored in database. Hence all options of listview will have different information which is dynamically changing from the database.

Can anyone suggest how to achieve this?

Answer 1

There are plenty of ready made javascript libraries out there that do exactly this, just google for “javascript tooltip” or “jquery tooltip”.

If you don’t want any bloat what so ever I suggest using jquery and simply creating the tooltip on the fly.

Eg.

$("select > option").hover(function( {
  pos = $(this).position();
  $(this).before($("<div>").css({position: absolute,left: pos.left,top: position.top}).text("Your Text"));
});

Note that this is just a very bare basic example, you’ll still want to think about offset and consider that the parent element might offset the positioning as well. You could make the link itself relatively positioned and skip the position detection all together.

Also note that I don’t think the hover event will trigger in every browser, as I don’t think the listView option node does not have any events attached to it by design. You should consider an alternative flow or using a javascript library to show custom listView elements which will allow you to attach events to the option nodes. Here are some you can use:

http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements#9

Anyway this should give you something to get started with.