Spicing up Matlab uicontrol tooltips

Outside the official Matlab blogs, perhaps the most widely known Matlab-related active blog is BlinkDagger. This blog is certainly worth following, especially for novice Matlab users who could gain fresh angles on regular programming tasks that have a simple solution in Matlab.

In one of their latest posts, BlinkDagger described how to use tooltips in Matlab GUI. In one of this blog’s very first posts, I described how HTML can easily be used with Matlab uicontrols. Let’s now combine these ideas to show how HTML support can easily be used to spice-up the tooltips.

Let’s start with a simple styled multi-line tooltip:

str = '<html><b>line #1</b><br><i><font color="red">line#2';

Multi-line HTML'ed tooltip

Multi-line HTML'ed tooltip

This technique was used to display the informative tooltip for my Java-based data table utility on the Matlab file Exchange:

Multi-line HTML-styled tooltip

Multi-line HTML-styled tooltip

Tooltips can also be used to present images, using the HTML <img> tag. However, the image src (filename) needs to be formatted in a URL-compliant format such as ‘http://undocumentedmatlab.com/images/table.png‘ or ‘file:/C:\Yair\Undocumented Matlab\Images\table.png’.

If you try to use a non-URL-format filename, the image will not be displayed. Instead, a placeholder box will appear. For example, let’s take the table screenshot above and try to place its filename directly in the tooltip HTML:

filePath = 'C:\Yair\Undocumented Matlab\Images\table.png';
str = ['<html><center><img src="' filePath '"><br>' filePath];

Tooltip with invalid HTML img source URL

Tooltip with invalid HTML img source URL

If we fix filePath to be a valid URL, it now looks as intended:

filePath = 'C:\Yair\Undocumented Matlab\Images\table.png';
filePath = strrep(['file:/' filePath],'\','/');
str = ['<html><center><img src="' filePath '"><br>' ...
       '<b><font color="blue">' filePath];

Tooltip with HTML image and caption

Tooltip with HTML image and caption

Note that the tooltip looks enormous (it’s actually even downsized to fit this post…). This is because our HTML <img> was not limited in size and so the tooltip was created to display the screenshot in its original large size. In order to limit the tooltip size, simply add the height and width attributes to the HTML <img> tag, remembering to preserve the original image aspect ratio.

Now that we know the basics, we can really go wild with HTML and CSS formatting. Have you configured any kick-butt tooltip in your application? If so, please share it here.

Categories: GUI, Low risk of breaking in future versions, UI controls, Undocumented feature

Tags: , , , , ,

Bookmark and SharePrint Print

20 Responses to Spicing up Matlab uicontrol tooltips

  1. wei says:

    Yair, Could handle2struct/struct2handle pair be extended to cover all java objects?

    • Yair Altman says:

      @wei – handle2struct/struct2handle are internal Matlab functions that cannot be modified. However, you can easily build your own m-file version that try’s to call the built-in version and if an error is thrown, then the catch segment will create the necessary output object based on inspection of the Java object.

      This could be a nice File Exchange submission – care to tackle it?

      You can get some pointers by looking at the code within my UIInspect utility on the File Exchange.

  2. Pingback: MATLAB GUI - Tool Tips are your Friends! | blinkdagger

  3. Ben Shepherd says:

    That looks like a really handy feature! On a slightly related note, do you know of any way of forcing a tooltip to display (or update one that is already being displayed)?

    • Yair Altman says:

      @Ben – this was challenging: Until you asked I thought I knew the standard answer, which is “no” – tooltips use the system’s ToolTipManager object that can’t be modified. But then I found this Java hack, which I’m not even sure is documented in Java… Assuming you get the Java reference in jHandle:

      import java.awt.event.ActionEvent;
      action = jHandle.getActionMap.get('postTip');
      actionEvent = ActionEvent(jHandle, ActionEvent.ACTION_PERFORMED, 'postTip');

      The mouse does not even have to be anywhere near the GUI object!

      Unfortunately, this hack requires the Java reference of the GUI object, and is not available for Matlab handles. To get a Matlab handle’s underlying Java reference you can use my FindJObj utility on the File Exchange and then use the hack.

  4. Alan says:

    Offtopic, sorry, but just wanted to reiterate – great blog idea, you should definitely keep it up. How about a post on systemdependent() ?

    • Yair Altman says:

      @Alan – thanks.

      I’ll do a post or two about systemdependent but look at my long TODO list: so little time, so much to do…

  5. Pingback: Zeilenumbruch für Tooltips in Matlab | House-Tiere         -d(~_~)b-

  6. Koelemay says:

    Great post as usual — any idea how to get this to work on the text popups when using datacursormode?? It seems like it would be similar to the tooltips but doesn’t seem to work by default. Thanks in advance for your time!

  7. Koelemay says:

    Hi Yair,
    Sorry I think my question was too ambiguous; I was wondering if it is possible to get html markup in the datacursor mode popups. So, for example, using datamatrix I’d like to use html markup in the strings for the dataTips input. Hopefully I’m not missing something horribly obvious! Thanks again for your help!

    • @Koelemay – datacursor popups are not tooltips and they don’t support HTML to the best of my knowledge. There’s probably a way to make them HTML-aware, if you dig deep enough in the datacursor code (\toolbox\matlab\graphics\@graphics\@datacursor\*.m, \@datatip\*.m and their relatives within \@graphics). Let us all know if you find a workaround.

  8. Pingback: Multi-line tooltips | Undocumented Matlab

  9. Nick says:

    Is it possible to use HTML to reference an image file from a compiled MATLAB executable? Is the format for the HTML “img” tag the same?

    img src=”file:\c:/user/mypic.png” worked when running my application in MATLAB, but I think the path isn’t correct when I run from my compiled exe. (Crazy MCR!)

    Also, are relative paths accepted? I could only get this to work with a full path so far.

    • Nick says:

      I ended up getting this working by adding the image file to the executable’s CTF archive (using the -a option to MCC) and then referencing it in my code by:

      imagePath = fullfile(ctfroot,'mypic.png');

      Then I provided imagePath as the path in the “img” tag. So…this was less of an HTML question, more about proper use of MCC.

  10. Kai says:


    The code to display tooltips programmatically does not work for uitables in newer Matlab versions anymore:

    import java.awt.event.ActionEvent;
    u = uitable('data',zeros(4,4),'tooltip','text...');
    jScroll = findjobj(u);
    jTable = jScroll.getViewport.getView;
    action = jTable.getActionMap.get('postTip')

    matlab output:

    action =
  11. Laurent says:

    Hi Yair ,
    Thanks for the tremendous amount of good tips on this blog, it s really helpful.
    i was wondering how to put tooltip on a matlab toolbar icon.
    As ‘TooltipString’ is not an accessible property for an instance of class ‘uitoolbar’.

    any idea how to work around this ?



    • @Laurent – set the TooltipString property on the toolbar icon’s handle (uipushtool, uitoggletool, uisplittool, or uitogglesplittool) – not on the toolbar handle.

  12. Konstantin says:

    Hi Yair. Your article is excellent, but i see in column “Names” you realized different data for popup in different rows. Please, can you says how you do this?

Leave a Reply

Your email address will not be published. Required fields are marked *