Custom tooltip using title, text, and image.
Custom tooltip using text only.
Custom tooltip using title only.
Custom tooltip using image only.
Introduction
There are several ways to show additional information about a control, including ToolTip. When we used standard ToolTip, the tooltip is shown as a rectangular window with text inside, and often the tooltip covers the main object and it will interfere with our work, unless you call Show method of the tooltip and provide its relative position from the main object. The main issue is that the tooltip is always a rectangular box, except if the IsBallon
property of the tooltip is set to true
, but still we can't create a tooltip that has a custom shape. So, I need a tooltip that can display provided title, content, image, and avoid the area of main object by default, can be shown either relative location from the main object, or absolute location on the screen, and can be created using custom shape.
Features
This tooltip will provides ToolTip
, ToolTipTitle
, and ToolTipImage
properties to each Control
and ToolStripItem
available. By default, this tooltip will be shown as a rounded corner rectangle, contains provided property (tooltip (as main content), title, and image), avoiding the area of the main object, show a little shadow on the right and bottom side, and uses fade effect.
Provided properties by this ToolTip.
Below are several custom properties of this tooltip:
AnimationSpeed
property, to determine the fade effect takes time, in milliseconds.
AutoClose
property, determine the length of the time tooltip will be displayed. This property is used when the EnableAutoClose
property is set to True
.
EnableAutoClose
property, if True
, the tooltip will be automatically closed when a period of time provided by AutoClose
property is passed, otherwise, the tooltip will be closed when MouseLeave
or MouseDown
event have occurred.
Location
property, determine how the tooltip will be located.
CustomLocation
property, custom location where the tool tip will be displayed, used when the Location
property is set to CustomScreen
or CustomClient
.
OwnerDraw
property, if true
, the tooltip's surface will be drawn by your code, Popup
and Draw
events will be raised, otherwise, the tooltip surface will be drawn itself.
OwnerDrawBackground
property, if true
, both background and surface of the tooltip will be drawn by your code, Popup
, DrawBackground
, and Draw
events will be raised, otherwise, the tooltip background will be drawn itself.
ToolTip Properties
ToolTipLocation
enumeration, this is the value of the Location
property.
Auto
, the tooltip location is automatically calculated in an appropriate location and avoiding the main object area.
MousePointer
, the tooltip will be located around the mouse pointer.
CustomScreen
, the tooltip will be located in specified location provided by CustomLocation
property on the screen.
CustomClient
, the tooltip will be located in specified location provided by CustomLocation
property relative to the client area of the main object.
How Does It Work
To show a tooltip window, I create a window inherited from Form
. This window has WS_EX_LAYERED
on it extended window style.
Protected Overrides ReadOnly Property CreateParams() As System.Windows.Forms.CreateParams
Get
Dim cp As CreateParams = MyBase.CreateParams
cp.ExStyle = cp.ExStyle Or WS_EX_LAYERED
Return cp
End Get
End Property
After the window has been created, I use ShowWindow
and SetWindowPos
functions to display the window.
ShowWindow(Me.Handle, SW_NOACTIVATE)
SetWindowPos(Me.Handle, HWND_TOPMOST, Me.Left, Me.Top, Me.Width, Me.Height, _
SWP_NOSIZE Or SWP_NOMOVE Or SWP_NOACTIVATE)
After the window has been created and displayed, now to draw the window. I use a bitmap as a canvas to draw the tooltip, and draw the bitmap to the screen on the window bounds.
Private Sub setBitmap(ByVal aBmp As Bitmap)
Dim screenDC As IntPtr = GetDC(IntPtr.Zero)
Dim memDC As IntPtr = CreateCompatibleDC(screenDC)
Dim hBitmap As IntPtr = IntPtr.Zero
Dim oldBitmap As IntPtr = IntPtr.Zero
Try
hBitmap = aBmp.GetHbitmap(Color.FromArgb(0))
oldBitmap = SelectObject(memDC, hBitmap)
Dim size As Size = New Size(aBmp.Width, aBmp.Height)
Dim pointSource As Point = New Point(0, 0)
Dim topPos As Point = New Point(Me.Left, Me.Top)
Dim blend As BLENDFUNCTION = New BLENDFUNCTION
blend.BlendOp = AC_SRC_OVER
blend.BlendFlags = 0
blend.SourceConstantAlpha = 255
blend.AlphaFormat = AC_SRC_ALPHA
UpdateLayeredWindow(Me.Handle, screenDC, topPos, _
size, memDC, pointSource, 0, blend, ULW_ALPHA)
Catch ex As Exception
Finally
ReleaseDC(IntPtr.Zero, screenDC)
If hBitmap <> IntPtr.Zero Then
SelectObject(memDC, oldBitmap)
DeleteObject(hBitmap)
End If
DeleteDC(memDC)
End Try
End Sub
Creating Custom Shaped ToolTip
If you want to create a custom shaped ToolTip, you need to set OwnerDrawBackground
property of the tooltip to True
, and then, handle the Popup
, Draw
, and DrawBackground
event raised by ToolTip.
Private Sub ToolTip1_Draw(ByVal sender As Object, ByVal e As Ai.Control.DrawEventArgs) _
Handles ToolTip1.Draw
Dim strFormat As StringFormat = New StringFormat
strFormat.LineAlignment = StringAlignment.Center
strFormat.Alignment = StringAlignment.Center
e.Graphics.DrawString("This is when OwnerDrawnBackground of _
the ToolTip is set to True", Me.Font, Brushes.Black, e.Rectangle, strFormat)
End Sub
Private Sub ToolTip1_DrawBackground(ByVal sender As Object, _
ByVal e As Ai.Control.DrawEventArgs) Handles ToolTip1.DrawBackground
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias
e.Graphics.TextRenderingHint = Drawing.Text.TextRenderingHint.ClearTypeGridFit
e.Graphics.FillEllipse(Brushes.White, e.Rectangle)
e.Graphics.DrawEllipse(Pens.Black, e.Rectangle)
End Sub
Private Sub ToolTip1_Popup(ByVal sender As Object, _
ByVal e As Ai.Control.PopupEventArgs) Handles ToolTip1.Popup
e.Size = New Size(100, 100)
End Sub
This code will produce a ToolTip like this:
Custom shaped tooltip by setting OwnerDrawBackground
property of the ToolTip to True
.
History
- 3rd August, 2010: Initial post