I am making an Ajax application using GWT and I need some kind of facility to display a tooltip on an image when I hover my mouse over it. Unfortunately GWT does not provide such widget that I can use directly. After spending some time on GWT forum, I found two neat posts (refer to post 1 and post 2), which included some source code for making tooltip widget.

I made a mod version of the tooltip widget which supports mouse movement event. Check it out. The source code is available for free.

Usage:

//create a new image
Image image = new Image("images/bear.bmp");
//create a tooltip
MobileTooltip tooltip = new MobileTooltip("tooltip 1");
//add mouse listener to the image
image.addMouseListener(new MobileTooltipMouseListener(tooltip));
//add the desired image to your page
RootPanel.get().add(image);

By default, the name of CSS style is tooltip, you can change it to anything to fit your need. Below is the style used in the demo:

.tooltip {
        border: 1px solid black;
        padding: 2px 3px 3px 3px;
        font-size: smaller;
        background-color: #ffffcc;
}

Demo: http://test.thecodecentral.com/demos/mobiletooltip/
Download: http://thecodecentral.com/wp-content/uploads/2007/04/mobile-tooltip.zip
Source:

Related Listings:

1. ToolTip using MooTools Tooltip let’s you create mouse over tooltips to your content...
2. Loading Panel Widget Probably needless to say, but here it is. A web...
3. jQuery plugin Tooltip Script Replacing standard tooltips is easy: Just include the script on...
4. The Starry Widget The Starry Widget is a simple class that will enable...
5. Build a Better Tooltip with jQuery Awesomeness Apr 1st in Javascript & AJAX by Jon Cazier Browsers...

Do you like this post?

Email: