Show box on hover of item in jlist

Question

I want to show box that contains information when user hovers on an item in list. Something like follows:

enter image description here

How can I do this? This can be seen in chat app like pidgin or spark.

score 1 · Answer 1 · answered Mar 01 '11 at 12:58

Here's how I would try to implement it :

Add a MouseListener and MouseMotionListener to your JList. When the mouser enters in the list, start a thread waiting for a certain delay (half a second). When the mouse is moved or dragged, restart waiting for the delay. When the mouse exits the JList, cancel the thread. Use these listeners to track the mouse position as well.

Once the delay has been met (which should thus mean that the mouse has stayed on the list, without moving, for the whole delay), then use SwingUtilities.invokeLater to show the information box. You can use JList's locationToIndex to determine which row the mouse is hovering on.

Andrew Thompson · Accepted Answer · 2011-03-02T13:27:44.003

1

Perhaps you are after a tool tip like functionality. If so, look into providing a ListCellRenderer component such as a JLabel, and set the tool tip of the JLabel.

E.G. of using HTML rendering in a tool tip.

import javax.swing.*;

class LabelWithHtmlTooltip {

    public static void main(String[] args) {
        Runnable r = new Runnable() {
            public void run() {
                String html = "<html><body>" +
                    "<h1>Header</h1>" +
                    "<img src='http://pscode.org/media/starzoom-thumb.gif' " +
                    "width='160' height='120'>";
                JLabel label = new JLabel("Point at me!");
                label.setToolTipText(html);
                JOptionPane.showMessageDialog(null, label);
            }
        };
        SwingUtilities.invokeLater(r);
    }
}

edited Mar 02 '11 at 13:27

answered Mar 01 '11 at 14:07

Andrew Thompson

168,117
40
217
433

@Andrew: will you please elaborate your answer? – Harry Joy Mar 02 '11 at 10:00
@Andrew: If I set ToolTip of JLabel then it will only show text. But I want text and image on hover – Harry Joy Mar 02 '11 at 13:09
@Harry Most Swing components (and tool tips) will render basic HTML. See edited reply with example above. – Andrew Thompson Mar 02 '11 at 13:29
@Andrew: Thnx buddy I didn't know that we can use HTML in tool tip. – Harry Joy Mar 03 '11 at 04:43
@Andrew: There is a problem in this. I'm getting byte array for image so how can I add that in img tag? – Harry Joy May 18 '11 at 05:32
@Harry: The HTML approach I showed will only work with images that can be reached by URL. In order to embed a `byte[]` or `Image` (more likely), it seems you would have to construct a document using `JEditorPane` or `JTextPane`. In fact, you might be able to tweak the `JEditorPane` `HTMLEditorKit` to provide support for images as byte arrays. – Andrew Thompson May 18 '11 at 05:55
@Andrew: I can't get it. Will you please elaborate a little more? – Harry Joy May 18 '11 at 06:16
@Harry: Can't get what specifically? – Andrew Thompson May 18 '11 at 06:27
@Andrew: I have looked for JEditorPane HTMlEditorKit but can't get how it can be useful for this? – Harry Joy May 18 '11 at 06:33
@Harry: After reviewing some code I wrote that implements applets in an `HTMLEditorKit` I decided that was not the **best** (easiest) way to go. Perhaps building a document directly in a `JTextPane` would be suitable. There is a great little [example](http://download.oracle.com/javase/tutorial/uiswing/components/editorpane.html) in the Java Tutorial that shows how to insert an `ImageIcon`. Another idea is to simply put a group of components into a `JPanel` and show that. Note that since the component will no longer be a tooltip, you'll need to implement it via JB Nizet's strategy. – Andrew Thompson May 18 '11 at 07:41

Show box on hover of item in jlist

2 Answers2