Page 1 of 2 12 LastLast
Results 1 to 40 of 58

Thread: Create Custom ToolTips using API

  1. #1

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Create Custom ToolTips using API

    This thread will grow over the next few days.

    The idea of this thread is a tutorial on how to create your own custom tooltips since the standard tooltip is pretty limited...it doesn't even allow for multiline text.

    Each project added to this thread will have more functionality than the previous project.

    This will build up to a full blown graphical custom tool tip demo with features such as multiline text, icons, shading and graphical styles.

    Woka

  2. #2

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 1 - Creating ToolTips

    This example merely creates tooltips using API for controls on a form at runtime.

    Features:
    • Add ToolTip
    • Remove ToolTip
    • Change ToolTip Text


    Woka
    Attached Files Attached Files

  3. #3

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 2 - Owner Drawn ToolTip

    Instead of letting windows create and draw the tooltip, we subclass the tooltip window and trap for the WM_PAINT message. When this arrives we create our own drawing area, and manually draw text and graphics to make up the tooltip.

    New features:
    • ToolTip can now display multiline strings.


    Woka
    Attached Files Attached Files

  4. #4

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 3 - Custom Colors

    BallonColor and Text color properties have now been added to the ToolTip class. When we manually draw the tooltip we can specify the colors to be used.

    New features:
    • BalloonColor
    • TextColor


    Woka
    Attached Files Attached Files

  5. #5
    I'm about to be a PowerPoster! kleinma's Avatar
    Join Date
    Nov 2001
    Location
    NJ - USA (Near NYC)
    Posts
    23,373
    this is really cool.. how is it regarding performance?

    1 suggestion.. since you create a collection of tooltips.. perhaps you could create a global settings object... where you could set everything but the text and maybe optional icon of the tooltip and that would be applied to ALL tooltips added to project, this would save the user from having to call their own sub to set the properties for each tool tip, maybe a class called Defaults that is in mobjTips so if they dont set a property it uses the default one they specified? just an idea...

  6. #6

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632
    I have thought about this, and my initial code worked lie this.
    But I wanted to set one of them to red, as it was an important one...and I couldn't.

    There is nothing wrong with doing:
    VB Code:
    1. Option Explicit
    2.  
    3. Private mobjTips As ToolTips
    4.  
    5. Private Sub Form_Load()
    6. DIm objTip As ToolTip
    7.    Set mobjTips = New ToolTips
    8.    Set objTip = mobjTips.Add(Command1, "Woof woof")
    9.    FormatTip pobjTip
    10. End Sub
    11.  
    12. Private Sub FormatTip(ByRef pobjTip As ToolTip)
    13.    With pobjTip
    14.       .Bold = True
    15.       .BalloonColor = RGB(34,65,123)
    16.    End With
    17. End Sub

    Woof

  7. #7

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 4 - Restructuring Code

    Right, if you have downloaded Stage 2 and Stage 3, and looked at the code, you will notice that the manual drawing of the tooltip is quite "messy"...Lots of constants flying about, not to mention all those evil API commands.
    If things stay like this, and we keep adding to the drawing code then sooner or later it will become so much of a mess that it will be very hard to add to it easily.
    This can be solved by creating a new class, clsDraw. This wraps up all this horrible API code and just has some simple methods exposed so that the drawing is made way easier.

    No new features have been implemented at this stage.

    Woka
    Attached Files Attached Files

  8. #8

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 5 - Adding Styles

    As suggested by kleinma I have added the ability to create styles.
    The project now as 3 new classes:
    • ToolTipStyle
    • TextStyle
    • BalloonStyle

    The class ToolTipStyle holds references to the TextStyle and BalloonStyle classes.
    So, for example, to get the TextColor we now do:
    VB Code:
    1. Dim objStyle As ToolTipStyle
    2.    Set objStyle = New ToolTipStyle
    3.    MsgBox objStyle.TextStyle.Color
    4.    Set objStyle = Nothing
    The reason I have written it like this is because over the next few days we are going to add many many properties to the project that allows you to change the appearance of the ToolTip, some related to text, some related to the balloon.
    Since these properties are for different things I thought I'd create a class to hold them. This makes things slightly easier in the long run. I admitt it's a little overkill for the color properties we have now, but you will soon see the benefits of this structure.

    New features:
    • Ability to create and set styles to individual tooltips


    Woka
    Attached Files Attached Files

  9. #9

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 6 - Simple Custom Properties

    I have added a few properties for both the balloon style and text style.
    The balloon can now have rounded corners. The level of rounding can be set by the property CurveIndex in the BalloonStyle class. If CurveIndex is 0 then a square balloon is drawn. By default this is set to 7.

    Margin properties have been added to the text style class. This allows you to specify the gap between the edge of the balloon and the text. All 4 margins, Top, Bottom, Left and Right, are available to change by the user. By default ALL margins are set to 5.

    New Feautures:
    • Add rounded corners to balloon
    • Specify margin gaps to position the text in the balloon


    Regards,

    Woka

  10. #10

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 7 - Balloon And Text Shadows

    A new class has been added, Shadow. This holds properties related to a shadow, ie X and Y offsets, color and whether it's visible or not.
    The shadow class is used by the text style class and the balloon style class.
    You'll notice that while drawing the tooltip, there is a little bit more work to be done to work out the position of grafix that are drawn to the screen. This is the only really messy thing that we have to do now, but it's unavoidable.

    New Features:
    • Balloon Shadows
    • Text Shadows


    Woka
    Attached Files Attached Files

  11. #11

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 8 - Font Properties

    At this stage I have added font attributes to the TextStyle class.
    These are used when drawing text onto our tooltip.

    New Features:
    • Font Type
    • Font Size
    • Bold
    • Italic
    • Underline


    We now have a fully functional method of creating custom tooltips.
    We can create nice tips, like the one I like in this example (not sure about the bold though), or we can create evil tips that look crap, like the 2 buttons in the middle.
    It's all about what properties you set.
    if you don't create a style then the default style is used. This is demonstrated by the 1st button of the form.

    We could leave it at this...but an icon would be nice don't you think?
    The next stage will have the ability to add an icon to the tooltip.

    Woka
    Attached Files Attached Files

  12. #12

  13. #13

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 9 - Backgorund Image

    The ballon class now has a new property, Image.
    An image can be set by using:
    VB Code:
    1. objTip.Style.BalloonStyle.Image = Image1.Picture
    If a background image is specified then this overrides the background color.

    I have also changed the demo app.
    This now incorporates a listview and allows you to set tooltips for individual listitems, and for the listview itself if no item is selected.

    New Features:
    • Ability to add a background image to the tooltip


    Woka
    Attached Files Attached Files

  14. #14

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Stage 10 - Play Sound

    I am not sure if this would be a widely used feature, but I added it in because I could, and because I have just fixed a bug in the drawing code
    The bug was in the clsDraw class. I was creating the HDC, setting it's background to Transparent, and then moving it to the desired position. This caused a few pixels to be out of place in the top right hand corner of the tool tip.
    The clsDraw class has been changed so that it moves the window 1st, then starts the painting on the hDC.
    This bug is in all previous versions posted here. To rectify this you can download the zip attached to this post and add the clsDarw class to previous versions. Then in the drawtooltip sub, in modDrawToolTip, the old code was:
    VB Code:
    1. With objDraw
    2.    .Start pobjTip.hWnd    
    3.    .GetTextSize pobjTip.Text, lngTxtWidth, lngTxtHeight
    4.    .Move udtPT.x + CURSOR_OFFSET_X, udtPT.y + CURSOR_OFFSET_Y, lngTxtWidth + (2 * TEXT_OFFSET_X), lngTxtHeight + (2 * TEXT_OFFSET_Y)
    5.    'blah blah blah
    This needs to be changing to:
    VB Code:
    1. With objDraw
    2.    .hWnd =  pobjTip.hWnd    
    3.    .GetTextSize pobjTip.Text, lngTxtWidth, lngTxtHeight
    4.    .Move udtPT.x + CURSOR_OFFSET_X, udtPT.y + CURSOR_OFFSET_Y, lngTxtWidth + (2 * TEXT_OFFSET_X), lngTxtHeight + (2 * TEXT_OFFSET_Y)
    5.    .StartPainting
    6.    'blah blah blah
    It's not a huge major bug, but more of annoying ich

    Anyways, to add sound when displaying a tooltip use the WavFile property on the Style class:
    VB Code:
    1. ObjTip.Style.WavFile = "C:\Woof.wav"

    New Features:
    • Play asynchronous sound when displaying tooltip


    Woka
    Attached Files Attached Files

  15. #15
    Frenzied Member vbNeo's Avatar
    Join Date
    May 2002
    Location
    Jutland, Denmark
    Posts
    1,994
    This seriously kicks *ss, good work!
    "Lies, sanctions, and cruise missiles have never created a free and just society. Only everyday people can do that."
    - Zack de la Rocha


    Hear me roar.

  16. #16

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632
    Cheers

    Any features you can think of that I have missed out?

    Am working on adding an icon to the tooltip. This is easy, but I am bogged down with work, so bear with me

    Woka

  17. #17
    Super Moderator manavo11's Avatar
    Join Date
    Nov 2002
    Location
    Around the corner from si_the_geek
    Posts
    7,171
    Good stuff Take your time


    Has someone helped you? Then you can Rate their helpful post.

  18. #18
    PowerPoster i00's Avatar
    Join Date
    Mar 2002
    Location
    1/2 way accross the galaxy.. and then some
    Posts
    2,388
    good job - the shadows etc r buggie when not compilled on mine

  19. #19
    Junior Member
    Join Date
    Jan 2005
    Posts
    18

    Re: Create Custom ToolTips using API

    This is really good stuff, Wokawidget. Very nice work.

    One other feature I could use is being able to set the location of the ToolTip balloon. I found where the cursor position is controlled by the two constants CURSOR_OFFSET_X and CURSOR_OFFSET_Y in the modDrawToolTip module, but that is about as far I have been able to get.

    What can we do to make these two constants into variables and make them accessable?

  20. #20
    New Member
    Join Date
    Oct 2001
    Posts
    6

    Re: Create Custom ToolTips using API

    Is it possible to add controls in the balloon tooltip ? Like adding a WithEvents button or a linklabel ?

  21. #21

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Re: Create Custom ToolTips using API

    in europe travelling. In saltzburg, austria at the moment.
    will be back in 5 days. will be able to help zou then.
    sorry for the delay.

    Woooof

  22. #22

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Re: Create Custom ToolTips using API

    Quote Originally Posted by laatkeur
    Is it possible to add controls in the balloon tooltip ? Like adding a WithEvents button or a linklabel ?
    Sorry for the late reply.

    Not easily no
    The tooltip is drawn using API commands, and therefore the controls would have to be created at runtime using API too.

    It is perfectly possible, and there is many examples of creating controls using API out there. But it's very complicated and very fiddley

    Not only would you have to be good at general vb6 stuff to achieve this, but your knowledge of API would have to be quite high too.

    Woka

  23. #23
    New Member
    Join Date
    Dec 2005
    Location
    Australia
    Posts
    2

    Re: Create Custom ToolTips using API

    Hi Woka,

    Thanks for writing such an excellent component!

    One question for you - do you know of any limitations of this control running on Win2000? At this stage, it looks like it doesn't work ...

  24. #24

  25. #25
    New Member
    Join Date
    Dec 2005
    Location
    Australia
    Posts
    2

    Re: Create Custom ToolTips using API

    Quote Originally Posted by Wokawidget
    Cheers

    Doesn't work?
    Why? Does the screen turn purple?

    Woka
    Sorry for the late reply ... I had forgotten about this post ...

    No, nothing like a CTD (crash to desktop), the control works fine on XP, but on 2000 machines, nothing appears at all. It is very strange. While I have discovered this on my own program, I have not yet tested it on a 2000 machine using your samples. I will do so and let you know...

  26. #26
    New Member
    Join Date
    May 2006
    Posts
    1

    Re: Create Custom ToolTips using API

    Hey Woka,

    I have done some further testing based upon Divot's comments.

    Before I proceed, I would also like to thank you for developing the multiline code.

    I have tested the code downloaded from this thread under windows 2000 and no tooltips appear at all during normal running.

    I have also tested another application (that has tooltip code integrated) under windows 2000 - with the same result of no tooltip showing.

    When the code from both applications is tested under XP it works without a problem.

    Further information:
    I had noticed when testing under windows 2000, if the screensaver activates and the mouse is moved to recover the screen, the tooltip does appear briefly as the application window is redrawn. But then vanishes, not to be seen until returning from a mouse move after the screensaver loads again. (During normal operation of the applications under windows 2000 there are no multiline tooltips displayed.)

    (I have made sure that in each instance of testing, that the mouse is over the multiline active segment of the application.)

    Thanks again for the work you have put into this!

  27. #27
    Member
    Join Date
    Nov 2005
    Posts
    52

    Re: Create Custom ToolTips using API

    Thats fantastic work. I was wondering if you were planning to do .Net version?

  28. #28

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Re: Create Custom ToolTips using API

    Cheers. I have always always intended to write .NET code for all my apps in my sig. But with my new job and moving house etc I haven't had time over the last 6 months.
    I know it's lazy of me, I should realy get it done.

    The dll does work in .NET though.

    Woka

  29. #29
    Fanatic Member
    Join Date
    Aug 2005
    Location
    South Africa
    Posts
    760

    Re: Create Custom ToolTips using API

    Thanks for the great stuff, woka!
    If I helped you out, please consider adding to my reputation!

    -- "The faulty interface lies between the chair and the keyboard" --

    VB6 Programs By Me:
    ** Dictionary, Thesaurus & Rhyme-Generator In One ** WMP Recent Files List Editor ** Pretty Impressive Clock ** Extract Firefox History **

  30. #30
    New Member
    Join Date
    May 2006
    Posts
    1

    Question Re: Create Custom ToolTips using API

    This works quite well!

    Couple of observations:

    Can't add tips to certain objects. I'm guessing it's those objects that do not have a ToolTip property (e.g., menus, shapes).

    StatusBar panels have a ToolTip property seperate from the statusbar itself. However this does not work:

    VB Code:
    1. mobjTips.Add StatusBar1.Panels(1), "This is panel 1."

    My workaround was this:

    VB Code:
    1. Private Sub StatusBar1_MouseMove(Button As Integer, Shift As Integer, _
    2.                                  x As Single, y As Single)
    3.   With StatusBar1
    4.     If x >= .Panels(1).Left And _
    5.        x <= (.Panels(1).Left + .Panels(1).Width) Then
    6.       mobjTips.Item(StatusBar1).Text = "Pointing to panel 1"
    7.     ElseIf x >= .Panels(2).Left And _
    8.            x <= (.Panels(2).Left + .Panels(2).Width) Then
    9.       mobjTips.Item(StatusBar1).Text = "Pointing to panel 2"
    10.     Else
    11.       mobjTips.Item(StatusBar1).Text = "Status Bar"
    12.     End If
    13.   End With
    14. End Sub

    If someone has suggestions to a better way to the above, I welcome them.

    Regards.

  31. #31

  32. #32
    Addicted Member
    Join Date
    Jul 2000
    Location
    Dubuque, IA
    Posts
    134

    Re: Create Custom ToolTips using API

    This code is awesome but It doesn't seem to work with Control indexes. I keep getting this message:

    This Key is already associated with an element of this collection

    Any Ideas how to make this work
    I'm not a bad guy, just bad at being a good guy!

  33. #33

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Re: Create Custom ToolTips using API

    ths is because it uses the control name for a key, and the control name is the same for all controls in an array. U need to modify the code to change the key it's saving in the collection when adding a tooltip to a control.

    Woka

  34. #34
    Addicted Member
    Join Date
    Jul 2000
    Location
    Dubuque, IA
    Posts
    134

    Re: Create Custom ToolTips using API

    I notice when I'm testing my project (in evironment mode) and the program initiates one of the tool tip text options, whenever I End the project from the standard toolbar that my project disappears and I have to re-load the project - any ideas?.

    Thanks
    I'm not a bad guy, just bad at being a good guy!

  35. #35

  36. #36
    Member
    Join Date
    Jul 2006
    Posts
    39

    Re: Create Custom ToolTips using API

    Wokawidget,you've done a fantastic job by posting the codes for creating custom tooltip.You effort is worthy of the highest praise.It's because of such greatness that developer's forums have become all the more popular.
    I hate downloading codings sans thanking the author,wherever it's possible.

  37. #37

  38. #38
    New Member
    Join Date
    Aug 2006
    Posts
    2

    Re: Create Custom ToolTips using API

    Hi,

    I came across this thread in a search for multi-line tooltips. Firstly I'd like to say what a useful feature this is to have, but I have one small problem. I wanted to use it to added tooltips to image controls to replace the tooltip feature of the image. It seems the image control doesn't have and hWnd property associated with it.

    Is there a way to get around this?

    Thanks in advance.

    Mark

  39. #39

    Thread Starter
    Super Moderator Wokawidget's Avatar
    Join Date
    Nov 2001
    Location
    Headingly Occupation: Classified
    Posts
    9,632

    Re: Create Custom ToolTips using API

    You could use a picture box....bad I know, but it's an option.

    I also think there is some way of getting the hWnd to an image control, but cannot remember how. Do a search on google.

    Or you could try something like:

    http://www.developerfusion.co.uk/show/3890/

    Woof

  40. #40
    New Member
    Join Date
    Aug 2006
    Posts
    2

    Re: Create Custom ToolTips using API

    Thanks for the reply.

    I'd like to keep to the image control as I'm overlaying them on a picturebox and like the transparancy that I can get with (mmmm - thinking now, haven't tried a picturebox with that, but I beleive PictureBoxes are more resource hungry and I need to display quite a lot at one time).

    I've been having a look at getting the Hwnd to the image, but no joy as yet. If you do remember I'd appreciate you posting back. I'll do the same if I find it.

    Thanks again.


    [EDIT]
    Found a quick get around for now based on the idea of Nisei above. As my image controls are placed in a PictureBox container, I can create a single ToolTip object for the picture box with out any text as this seems to keep it hidden.

    When I move my mouse over one of the images I set my ToolTip text to what I want for that image. When I move it back over the Picturebox I set the text back to "".

    VB Code:
    1. Private Sub imgTruck_MouseMove(Index As Integer, Button As Integer, Shift As Integer, X As Single, Y As Single)
    2.  
    3.     mobjTips.Item(pic1).Text = imgTruck(Index).Tag
    4.  
    5. End Sub
    6.  
    7.  
    8. Private Sub pic1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
    9.  
    10.     mobjTips.Item(pic1).Text = ""
    11.  
    12. End Sub


    Maybe not the most elegant but it seems to work quite well.
    Last edited by maj3091; Aug 22nd, 2006 at 05:53 AM.

Page 1 of 2 12 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width