Aug 28

Custom-Drawn Tooltips

C, Win32 Add comments

Like many common controls, the tooltip control supports custom drawing for maximum flexibility. This is a quick tutorial on how to use the tooltip custom draw facility.

First, start with the following scratch program (which is a slightly modified version of Raymond Chen’s scratch program):

  1. #define STRICT
  2. #include <windows.h>
  3. #include <windowsx.h>
  4. #include <commctrl.h>
  5. #include <tchar.h>
  6.  
  7. #define WND_CLASS_NAME TEXT("Scratch")
  8.  
  9. HINSTANCE g_hinst;
  10.  
  11. BOOL OnCreate(HWND hwnd, LPCREATESTRUCT lpcs)
  12. {
  13.     return TRUE;
  14. }
  15.  
  16. void OnDestroy(HWND hwnd)
  17. {
  18.     PostQuitMessage(0);
  19. }
  20.  
  21. LRESULT CALLBACK WndProc(HWND hwnd, UINT uiMsg, WPARAM wParam,
  22.                          LPARAM lParam)
  23. {
  24.     switch (uiMsg)
  25.     {
  26.     HANDLE_MSG(hwnd, WM_CREATE, OnCreate);
  27.     HANDLE_MSG(hwnd, WM_DESTROY, OnDestroy);
  28.     }
  29.  
  30.     return DefWindowProc(hwnd, uiMsg, wParam, lParam);
  31. }
  32.  
  33. BOOL RegisterWindowClass()
  34. {
  35.     WNDCLASS wc;
  36.     ATOM atom;
  37.  
  38.     wc.style = 0;
  39.     wc.lpfnWndProc = WndProc;
  40.     wc.cbClsExtra = 0;
  41.     wc.cbWndExtra = 0;
  42.     wc.hInstance = g_hinst;
  43.     wc.hIcon = NULL;
  44.     wc.hCursor = LoadCursor(NULL, IDC_ARROW);
  45.     wc.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1);
  46.     wc.lpszMenuName = NULL;
  47.     wc.lpszClassName = WND_CLASS_NAME;
  48.  
  49.     atom = RegisterClass(&wc);
  50.     return (atom != 0);
  51. }
  52.  
  53. int WINAPI _tWinMain(HINSTANCE hinst, HINSTANCE hinstPrev,
  54.                      LPTSTR lpCmdLine, int nCmdShow)
  55. {
  56.     INITCOMMONCONTROLSEX icc;
  57.     int ret = EXIT_FAILURE;
  58.  
  59.     g_hinst = hinst;
  60.  
  61.     // We will need the tooltip common control
  62.     icc.dwSize = sizeof(icc);
  63.     icc.dwICC = ICC_WIN95_CLASSES;
  64.     if (InitCommonControlsEx(&icc))
  65.     {
  66.         if (RegisterWindowClass())
  67.         {
  68.             HWND hwnd = CreateWindow
  69.                 (
  70.                 WND_CLASS_NAME,
  71.                 TEXT("Scratch"),
  72.                 WS_OVERLAPPEDWINDOW,
  73.                 CW_USEDEFAULT, CW_USEDEFAULT,
  74.                 CW_USEDEFAULT, CW_USEDEFAULT,
  75.                 NULL,
  76.                 NULL,
  77.                 hinst,
  78.                 0
  79.                 );
  80.             if (hwnd != NULL)
  81.             {
  82.                 MSG msg;
  83.  
  84.                 (void) ShowWindow(hwnd, nCmdShow);
  85.                 while (GetMessage(&msg, NULL, 0, 0)) {
  86.                     TranslateMessage(&msg);
  87.                     DispatchMessage(&msg);
  88.                 }
  89.  
  90.                 ret = EXIT_SUCCESS;
  91.             }
  92.         }
  93.     }
  94.  
  95.     return ret;
  96. }

Next, we’ll add a tooltip to this window. We’re not going to do anything fancy like tooltip multiplexing so we’ll use TTF_SUBCLASS.

  1. HWND g_hwndTT;
  2.  
  3. BOOL OnCreate(HWND hwnd, LPCREATESTRUCT lpcs)
  4. {
  5.     BOOL ret = FALSE;
  6.  
  7.     // Create the tooltip window
  8.     g_hwndTT = CreateWindow
  9.         (
  10.         TOOLTIPS_CLASS,
  11.         NULL,
  12.         TTS_NOPREFIX,
  13.         CW_USEDEFAULT, CW_USEDEFAULT,
  14.         CW_USEDEFAULT, CW_USEDEFAULT,
  15.         hwnd,
  16.         NULL,
  17.         g_hinst,
  18.         NULL
  19.         );
  20.     if (g_hwndTT != NULL)
  21.     {
  22.         // Tell the tooltip to register itself using the entire scratch
  23.         // window’s client area as the active region.
  24.         TOOLINFO ti = { sizeof(ti) };
  25.         ti.uFlags = TTF_SUBCLASS;
  26.         ti.hwnd = hwnd;
  27.         ti.hinst = g_hinst;
  28.         ti.uId = 0;
  29.         ti.lpszText = TEXT("Hello world!");
  30.         if (GetClientRect(hwnd, &ti.rect))
  31.         {
  32.             if (SendMessage(g_hwndTT, TTM_ADDTOOL, 0, (LPARAM)&ti))
  33.             {
  34.                 ret = TRUE;
  35.             }
  36.         }
  37.     }
  38.  
  39.     // If there were any failures, clean up the allocated objects
  40.     if (!ret)
  41.     {
  42.         if (g_hwndTT)
  43.             DestroyWindow(g_hwndTT);
  44.     }
  45.  
  46.     return ret;
  47. }

If you compile and run the program, you should see a tooltip with the text “Hello World!” pop up.

To use custom draw, we must handle the NM_CUSTOMDRAW message. First we’ll write the WM_NOTIFY handler to forward the message to our function.

  1. LRESULT OnToolTipCustomDraw(NMTTCUSTOMDRAW* pcd)
  2. {
  3.     // Perform the default action (i.e. have the tooltip control draw
  4.     // "Hello World!" itself)
  5.     return CDRF_DODEFAULT;
  6. }
  7.  
  8. LRESULT OnNotify(HWND hwnd, int idFrom, NMHDR* pnm)
  9. {
  10.     if (pnm->hwndFrom == g_hwndTT)
  11.     {
  12.         switch (pnm->code)
  13.         {
  14.         case NM_CUSTOMDRAW:
  15.             return OnToolTipCustomDraw((NMTTCUSTOMDRAW*) pnm);
  16.         }
  17.     }
  18.  
  19.     return 0;
  20. }
  21.  
  22. LRESULT CALLBACK WndProc(HWND hwnd, UINT uiMsg, WPARAM wParam,
  23.                          LPARAM lParam)
  24. {
  25.     switch (uiMsg)
  26.     {
  27.     HANDLE_MSG(hwnd, WM_CREATE, OnCreate);
  28.     HANDLE_MSG(hwnd, WM_DESTROY, OnDestroy);
  29.     HANDLE_MSG(hwnd, WM_NOTIFY, OnNotify);
  30.     }
  31.  
  32.     return DefWindowProc(hwnd, uiMsg, wParam, lParam);
  33. }

Now we’ll implement the custom draw function. For simplicity’s sake, we will simply write the text “Hello World!” just as the tooltip did before we used custom draw.

It is important to note that the tooltip control will continue to draw the static text even if we are using custom draw. To get around this problem, we’ll have the tooltip control draw the text in the same color as the background, effectively making it invisible.

  1. // Draw the contents of the tooltip within the rectangle prc
  2. void DrawToolTipContent(HDC hdc, RECT* prc)
  3. {
  4.     SetTextColor(hdc, RGB(0, 0, 0));
  5.     TextOut(hdc, prc->left, prc->top, TEXT("Hello World!"), 12);
  6. }
  7.  
  8. LRESULT OnToolTipCustomDraw(NMTTCUSTOMDRAW* pcd)
  9. {
  10.     switch (pcd->nmcd.dwDrawStage)
  11.     {
  12.     case CDDS_PREPAINT:
  13.         {
  14.             // Set the text and back colors of default text so it
  15.             // becomes invisible
  16.             COLORREF clrBg = (COLORREF) SendMessage(g_hwndTT,
  17.                                                     TTM_GETTIPBKCOLOR,
  18.                                                     0, 0);
  19.             SetTextColor(pcd->nmcd.hdc, clrBg);
  20.             SetBkColor(pcd->nmcd.hdc, clrBg);
  21.             return CDRF_NOTIFYPOSTPAINT;
  22.         }
  23.     case CDDS_POSTPAINT:
  24.         {
  25.             DrawToolTipContent(pcd->nmcd.hdc, &pcd->nmcd.rc);
  26.             return CDRF_SKIPDEFAULT;
  27.         }
  28.     }
  29.  
  30.     return CDRF_DODEFAULT;
  31. }

We now can use the full range of GDI functions to render the content of the tooltip, including multiple fonts, lines, ellipses, etc. However, drawing is limited to the size of the tooltip’s client window, and this is determined based on the text passed to the tooltip window in OnCreate(). If we want to control the size of the tooltip, we must handle the TTN_SHOW message:

  1. LPCTSTR g_szTooltipMsg = TEXT("Hello World!");
  2.  
  3. // Determine the required size of the client area of the tooltip
  4. BOOL GetToolTipContentSize(SIZE* psz)
  5. {
  6.     BOOL ret = FALSE;
  7.  
  8.     HDC hdc = GetDC(g_hwndTT);
  9.     if (hdc != NULL)
  10.     {
  11.         HFONT hfontTT = (HFONT) SendMessage(g_hwndTT, WM_GETFONT, 0, 0);
  12.         HFONT hfontTTOld = (HFONT) SelectObject(hdc, hfontTT);
  13.         if (hfontTTOld != NULL)
  14.         {
  15.             SIZE szText;
  16.             if (GetTextExtentPoint32(hdc, g_szTooltipMsg,
  17.                                      lstrlen(g_szTooltipMsg), &szText))
  18.             {
  19.                 psz->cx = szText.cx;
  20.                 psz->cy = szText.cy;
  21.                 ret = TRUE;
  22.             }
  23.  
  24.             SelectObject(hdc, hfontTTOld);
  25.         }
  26.  
  27.         ReleaseDC(g_hwndTT, hdc);
  28.     }
  29.  
  30.     return ret;
  31. }
  32.  
  33. // Determine the required client rectangle of the tooltip to fit the
  34. // text
  35. BOOL GetToolTipContentRect(RECT* prc)
  36. {
  37.     BOOL ret = FALSE;
  38.  
  39.     SIZE sz;
  40.     if (GetToolTipContentSize(&sz))
  41.     {
  42.         if (GetWindowRect(g_hwndTT, prc))
  43.         {
  44.             prc->right = prc->left + sz.cx;
  45.             prc->bottom = prc->top + sz.cy;
  46.             ret = TRUE;
  47.         }
  48.     }
  49.  
  50.     return ret;
  51. }
  52.  
  53. // When the tooltip is being shown, size it to fit the content
  54. LRESULT OnToolTipShow(NMHDR* pnm)
  55. {
  56.     LRESULT ret = 0;
  57.     RECT rc;
  58.  
  59.     if (GetToolTipContentRect(&rc))
  60.     {
  61.         // Adjust the rectangle to be the proper size to contain the
  62.         // content
  63.         if (SendMessage(g_hwndTT, TTM_ADJUSTRECT, TRUE, (LPARAM) &rc))
  64.         {
  65.             // Resize and move the tooltip accordingly
  66.             if (SetWindowPos(g_hwndTT, NULL, rc.left, rc.top,
  67.                              rc.right - rc.left, rc.bottom - rc.top,
  68.                              SWP_NOZORDER | SWP_NOACTIVATE))
  69.             {
  70.                 ret = TRUE;
  71.             }
  72.         }
  73.     }
  74.  
  75.     return ret;
  76. }
  77.  
  78. LRESULT OnNotify(HWND hwnd, int idFrom, NMHDR* pnm)
  79. {
  80.     if (pnm->hwndFrom == g_hwndTT)
  81.     {
  82.         switch (pnm->code)
  83.         {
  84.         case TTN_SHOW:
  85.             return OnToolTipShow(pnm);
  86.         case NM_CUSTOMDRAW:
  87.             return OnToolTipCustomDraw((NMTTCUSTOMDRAW*) pnm);
  88.         }
  89.     }
  90.  
  91.     return 0;
  92. }
  93.  
  94. void DrawToolTipContent(HDC hdc, RECT* prc)
  95. {
  96.     SetTextColor(hdc, RGB(0, 0, 0));
  97.     TextOut(hdc, prc->left, prc->top, g_szTooltipMsg,
  98.             lstrlen(g_szTooltipMsg));
  99. }

We now have a sizable, custom-drawable tooltip control.

3 Responses to “Custom-Drawn Tooltips”

  1. Peter Says:
    February 14th, 2008 at 2:42 pm

    Hello, very good article. Do u know why it’s not working with balloon tips (flag TTS_BALLOON)? it’s not resized

  2. Paul Sanders Says:
    September 6th, 2008 at 10:59 am

    I think I might know the answer to that one. The NM_CUSTOMDRAW handler should not resize the window itself. Instead, it should inspect the uDrawFlags member of the NMTTCUSTOMDRAW structure passed in. If this contains DT_CALCRECT then the tooltip window is asking the handler to calculate the size of the text (or whatever) to be displayed, which the handler can do by updating the rc member of the NMTTCUSTOMDRAW structure.

    Sneaky, eh? I’m not sure if it works 100% though as the tooltip window seems to carry out some additional calculations of its own so a bit of experimentation might be in order.

    Paul Sanders
    http://www.alpinesoft.co.uk

  3. Paul Sanders Says:
    September 7th, 2008 at 5:20 am

    Hello again,

    Further to my previous post … I have found that you can reduce the size of the tooltip window by the method I described, but you cannot increase it (!!). So Steven is right after all - you have to resize the window yourself at the critical moment. Sorry about that.

    There’s a nicer way to stop the tooltip from drawing its own text though - do all your painting in CDDS_PREPAINT and return CDRF_SKIPDEFAULT. The tooltip then gracefully steps aside (which is about the only thing it does do gracefully). This opens the door to fancy backgrounds, for example.

Leave a Reply

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS Log in