Skip to main content

How to show tooltips for image buttons?

Please note these forums are being decommissioned and use the new and improved forums at
3 replies [Last post]
Joined: 2010-02-17

Hello mobile experts,

I have a form with many small pictures arranged in a grid.
I want to show an tooltip when:
1) user selects a button with cursor keys on keyboard phones
2) user touches it with finger on touch phone.

On touch screens, the finger hide a big part of button when the user presses it. So the tool tip need to go outside the component. So all solutions that act on component level will NOT work.

I have already solved how to get the focused element and the tooltip text. The important concepts are FocusListener and ClientProperty.
So my Form implements a FocusListener, when I create the buttons, I call

<br />
btn.addFocusListener(this);<br />
btn.putClientProperty("TOOLTIPTEXT", "My great tooltip");<br />

In the focusGained() method, I can access the button and the tooltip text. In focusLost() I clear my stored information. That works fine.

Now how to display the tooltip?

My first idea is to use something like in used in the search list example in the lwuit blog

The idea is to have a Label named "tooltip" that is not added to the form. This gets the tooltip. The text of the label is stored in focusGained().
Then I have overriden the paint method like this:

<br />
public void paint(Graphics g) {<br />
   super.paint(g);<br />
   if(showTooltip && (focusedButton != null)){<br />
		tooltip.setSize(tooltip.getPreferredSize());<br />
		tooltip.setX(focusedButton.getAbsoluteX());<br />
		tooltip.setY(focusedButton.getAbsoluteY() - 10);<br />
		tooltip.paintComponent(g, true);<br />
   }<br />
}<br />

This works only partly. Problems are:
1) It is not repainted correctly. It needs not only to repaint the tooltip, but also removes an old tooltip (on a different position)
I can solve this by calling repaint() on the whole form in focusGained() but this is not optimal. It may be a problem when user wants to navigates quickliy.
2) When scolling the positions get wrong.
3) I noticed that the focused element seem to be painted after the form, so they focused element is overpainting the tooltip when they overlap.

So I think this is the right solution to go further. Are there any other ideas or even working solutions?

Reply viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.
Joined: 2003-11-07

The LWUIT chat demo uses a glass pane to show a tooltip like notice when someone joins/leaves the chat:

Joined: 2010-02-17

Thank you, that is a very interesting example program.
My problem is a little different, as I want the tooltip to be near the corresponding images. But I managed to use the Glasspane. I put the above paint() method in the glasspane, installed it, and called a redraw of the whole form in the focusGained() method.
That worked.The Glasspane is drawn above all focused/unfocused components, so this problem is solved. There was only a small glitch: when the movement of the focus also triggered scrolling down, I had two tooltips, one of it inside the command button bar. This problem disappeared when I called redraw only on the contentPane.
So now I have a working solution. I think it is not optimal, as it redraws much more then needed.
Karsten Meier

Joined: 2003-11-07

This is very tricky to optiize since scrolling happens as an animation and although you can call repaint with coordinates (to improve performance) these coordinates might change if you have a scroll. I think having a notice in the top/bottom portion of the screen is actually very appropriate for a mobile device since the screen is so small you aren't likely to miss the tooltip especially if it animates in/out like we do in the chat demo.