I often use tooltips in my Matlab GUIs. They are a fantastically intuitive and unobtrusive visual helper for users to understand the GUI. In this blog, I have already posted several articles about how to tweak tooltip contents (here, here, and here). Today I would like to expand on one of the aspects that were already covered, namely that of multi-line tooltips.
Basic multi-line tooltips
The basic multi-line tooltip consists of a simple string that includes the newline character. for example:
set(hControl, 'TooltipString', ['this is line 1' 10 'and this is line 2'])
Or better (platform independent):
set(hControl, 'TooltipString', sprintf('this is line 1\nand this is line 2'))
A simple multi-line tooltip string
As can be seen, this is very simple to set up. Unfortunately, the font cannot be customized. Which leads us to:
HTML-rendered multi-line tooltips
Tooltips, like most other Matlab controls, supports HTML rendering. This is a natural corollary of the fact that Java Swing, on which all Matlab controls are based, automatically supports HTML. All we need to do is to add ‘<HTML>‘ at the very beginning of our tooltip string, and then we can embed HTML tags within the rest of the string:
set(hControl, 'tooltipString', '<html><b>line #1</b><br /><i><font color="red">line#2</font></i></html>');
Multi-line HTML'ed tooltip
And a more sophisticated example, used within my createTable utility on the File Exchange:
A more complex multi-line HTML-based tooltip
Note that there is no need to close the final HTML tags in the tooltip string, although it’s not an error to do so (as I have done above).
The problem with formatted multi-line tooltip
Unfortunately, none of these two methods work when we wish to display formatted multi-line tooltips. For example, suppose that we wish to display struct data in a tooltip:
>> myData = struct('a',pi, 'b',-4, 'very_long_field_name','short txt') myData = a: 3.14159265358979 b: -4 very_long_field_name: 'short txt' >> myDataStr = evalc('disp(myData)'); >> set(hControl, 'TooltipString', myDataStr);
Badly-formatted multi-line tooltip
If we try to use HTML, the result looks even worse, because if the HTML-renderer detects a newline character embedded in the string, it simply uses the regular (non-HTML) renderer:
set(hControl, 'TooltipString', ['<html>' myDataStr '</html>'])
Failure to parse a string using HTML
Even if we fix this by replacing all line-separators with ‘<br/>‘, we still get a badly-formatted tooltip, because HTML ignores all white spaces:
>> myDataStr2 = strrep(myDataStr, sprintf('\n'), '<br />'); >> set(hControl, 'TooltipString', ['<html>' myDataStr2 '</html>'])
Badly-formatted multi-line tooltip
(you can see that it’s HTML-formatted by the fact that the tooltip contents do not have internal margins like in the non-HTML tooltip above)
Fixed-width font multi-line tooltips
We now recall the HTML <pre> tag, which tells HTML not to ignore white-spaces. In most web browsers, it also defaults to using a fixed-width font. Unfortunately, this is not the case here:
set(hControl, 'TooltipString', ['<html><pre>' myDataStr2])
Still not quite right...
Which brings us to the final customization of the day, namely explicitly forcing the tooltip to use a fixed-width font:
set(hControl, 'TooltipString', ['<html><pre><font face="courier new">' myDataStr2 '</font>'])
Finally - a well-formatted multi-line tooltip
Even more powerful customizations can be achieved using CSS rather than pure HTML. This will be discussed a future article.