«

Mobile Tooltip Widget for GWT(Google Web Toolkit)

Posted on April 6, 2007
Filed Under Java, Javascript | 17 Comments     


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.

Online Demo
Download Source Code

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

Related Links

If you find this post useful, consider donating a few bucks to help the server running cost.

Go to Top

Subscribe to keep track of your comment.
17 Comments so far
  1. Ben April 15, 2008 3:41 am
    Great work! Thanks a lot
  2. [...] ?????Mobile Tooltip widget Posted in AjaxTooltip | Leave a Comment [...]
  3. [...] ??????? ???? ??????. Tooltip_Mootools Jquery Popup Bubbles SuperNote v1.0beta2 Mobile Tooltip BetterTip CoolTips Jquery ToolTip Plugin fmates_member="FMC003336-01694"; fmates_c="eeeeee"; [...]
  4. [...] Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo [...]
  5. [...] Mobile Tooltip widget A mod version of the tooltip widget for GWT which supports mouse movement event. [...]
  6. 30?tooltips????????? - ????|????? October 22, 2008 2:34 am
    [...] Mobile Tooltip widget [...]
  7. [...] Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo [...]
  8. [...] Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo [...]
  9. Confluence: e-Commerce February 24, 2009 10:55 pm
    <strong>Implementation Specification page...</strong>

    Introduction The new functionality like the blowout print and the ability to upload prints and create hotspots should be implemented in new Design Time Controls. This to make the new functionality easier to work with for the consultants,......
  10. [...] Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo [...]
  11. [...] Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo [...]
  12. [...] Modified version. Check out original Nice Title tooltip here. [...]
  13. [...] Mobile Tooltip Widget for GWT [...]
  14. [...] Mobile Tooltip widget [...]
  15. [...] 17.)Mobile Tooltip widget 对GWT脚本的革新,能支持鼠标移动。 [...]
  16. 150个JS特效脚本 | 创造 January 12, 2010 5:08 am
    [...] 10. Mobile Tooltip widget (演示地址) [...]
  17. [...] Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo | [...]
Code Central Special

Polls

  • Your opinion about the design of this site:

    View Results

    Loading ... Loading ...