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'; set(hControl,'tooltipString',str);
This technique was used to display the informative tooltip for my Java-based data table utility on the Matlab file Exchange:
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 ‘//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]; set(hButton,'tooltipString',str);
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]; set(hButton,'tooltipString',str);
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.