Click here to Skip to main content
15,867,594 members
Articles / Desktop Programming / Windows Forms

A ToolTip with Title, Multiline Contents, and Image

Rate me:
Please Sign up or sign in to vote.
4.86/5 (53 votes)
3 Aug 2010CPOL3 min read 156.4K   11.4K   126   34
A tooltip to display separate title, contents, and image of each control, and enable for custom shaped
Custom tooltip using title, text, and image.

alltooltip.PNG

Custom tooltip using text only.

contentonlytooltip.PNG

Custom tooltip using title only.

titleonlytooltip.PNG

Custom tooltip using image only.

imageonlytooltip.PNG

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.

providedproperties.PNG

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

tooltipproperties.PNG

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.

VB.NET
' This is how to create a layered window.
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.

VB.NET
' Prevent window to activate itself.
ShowWindow(Me.Handle, SW_NOACTIVATE)
' Show window at the top most location.
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.

VB.NET
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.

VB.NET
' Assumes you have created a ToolTip object named ToolTip1
' This event fired when the tooltip needs to draw its surface.
' Called when the OwnerDraw or OwnerDrawBackground property is set to true.
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
' This event fired when the tooltip needs to draw its background.
' Called only when OwnerDrawBackground property is set to true.
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
' This event fired before tooltip is displayed, mainly to provide the tooltip's size.
' Called when the OwnerDraw or OwnerDrawBackground property is set to true.
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.

ownerdrawbackground.PNG

History

  • 3rd August, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer (Senior) Ai Software
Indonesia Indonesia
Keep moving ...
Learn the different ...
Get the advantages ...

And ... knowing everything ...

Comments and Discussions

 
GeneralMy vote of 5 Pin
roelpaulo7-Aug-16 1:02
roelpaulo7-Aug-16 1:02 
QuestionMy Vote of 15 Pin
EzequielKees27-Jan-16 4:36
EzequielKees27-Jan-16 4:36 
GeneralMy Vote of 5 ...! Pin
Ralf Meier7-May-15 8:20
professionalRalf Meier7-May-15 8:20 
Questionthe window tooltip sometimes appear more than one time? Pin
RZ5028-Mar-15 8:07
RZ5028-Mar-15 8:07 
QuestionHow do use it with code (vb.net)? Pin
nhatlang1082-Jun-14 15:59
nhatlang1082-Jun-14 15:59 
QuestionIt's a great Pin
BobZeng7-Apr-14 1:21
BobZeng7-Apr-14 1:21 
GeneralMy vote of 1 Pin
Horia Tudosie18-Feb-14 9:53
Horia Tudosie18-Feb-14 9:53 
QuestionBallon ToolTip Pin
padmanabhan N21-Jun-13 19:48
padmanabhan N21-Jun-13 19:48 
GeneralMy vote of 5 Pin
Polinia17-May-13 2:01
Polinia17-May-13 2:01 
QuestionNo AutomaticDelay? really? Pin
ElektroStudios9-Jan-13 19:52
ElektroStudios9-Jan-13 19:52 
QuestionRight to Left Tooltip Pin
hackerspk8-Nov-12 21:10
hackerspk8-Nov-12 21:10 
AnswerRe: Right to Left Tooltip Pin
tweber201217-Dec-12 22:05
tweber201217-Dec-12 22:05 
BugDoesn't appear on first mouseover event Pin
Barbara C30-Aug-12 12:58
Barbara C30-Aug-12 12:58 
Questiontanya Pin
diar raid22-Aug-12 16:12
diar raid22-Aug-12 16:12 
AnswerRe: tanya Pin
red_moon25-Aug-12 20:27
red_moon25-Aug-12 20:27 
BugLove this, two minor bugs Pin
Barbara C10-Aug-12 7:12
Barbara C10-Aug-12 7:12 
GeneralRe: Love this, two minor bugs Pin
red_moon10-Aug-12 22:18
red_moon10-Aug-12 22:18 
GeneralRe: Love this, two minor bugs Pin
Barbara C11-Aug-12 6:18
Barbara C11-Aug-12 6:18 
GeneralMy vote of 5 Pin
Sergio Andrés Gutiérrez Rojas2-Jul-12 20:20
Sergio Andrés Gutiérrez Rojas2-Jul-12 20:20 
Good work.
GeneralMy vote of 5 Pin
Polinia28-May-12 1:47
Polinia28-May-12 1:47 
GeneralMy vote of 5 Pin
Manoj Kumar Choubey5-Apr-12 0:01
professionalManoj Kumar Choubey5-Apr-12 0:01 
GeneralMy vote of 5 Pin
noreply-thephoenixprod11-May-11 20:18
noreply-thephoenixprod11-May-11 20:18 
GeneralMy vote of 5 Pin
csrss21-Dec-10 9:07
csrss21-Dec-10 9:07 
GeneralMy vote of 5 Pin
matcop13-Oct-10 6:25
matcop13-Oct-10 6:25 
QuestionVery Nice Article Pin
eiia71-Oct-10 6:06
eiia71-Oct-10 6:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.