Hint Boxes

Greetings Experts,

I was wondering how easy it was to create personalised hint boxes, which contain images. This is something i have been thinking about, since installing Trillian (instant messenger). In Trillian, if you hover over any of your contacts, the hint box displays several piece of information, nicely formatted, aswell as a small image of the persons display picture.

I have taken a screenshot so you can see an example of what i mean, without having to install trillian first. You can see this here....    http://www.habbar.co.uk/EE/hints.PNG

It would be great if anyone knew of a component which made this extremely easy to do.

- Jay
Who is Participating?
ZhaawZSoftware DeveloperCommented:
Well, I made some example for you that shows how to customize default hint windows. This is first time I try it ;) It's not difficult.

To make custom hint windows, you'll have to make your own class from THintWindow and assign it's name to HintWindowClass variable (look at the bottom of example). There's a little problem - as far as I know, this customized hint window will be used for *all* controls in application. I solved this problem by adding some identifier to hint message (to be able to use both customized hint message with image, label and other controls on it AND to be able to use a simple hint messages at the same time). This identificator is '+' symbol in an example.

To put some images or other custom controls on hint window, you'll have to override constructor and destructor. Create all the controls you need in constructor and don't forget to destroy all of them in destructor.

There's also a constant HintInfo that holds information for hints (a hint identificator, filename to image and some text info). You may make it as a constant (if information will not change at runtime) or as a variable (if you'll need to change info at runtime).

The main part of example is overriding ActivateHint procedure. I tried to explain everything I wrote there. If you have some questions like 'why is it so' - just ask ;)

To use new hint window:
* assign it's name (type) to variable HintWindowClass (I did this in onCreate event)
* set Form1.ShowHint to true
* fill HintInfo array with some information (if you're using example that's below - don't forget to change filenames. I used 128x128px images)
* put some control on form
* assign some hint to it

For example - if Button1.Hint is '+first', then hint window will be customized (with custom size, image, label etc) and it will take information from HintInfo array where id = 'first', but if Button1.Hint = '+asf', then the simple hint message will be shown because there's not id 'asf' in HintInfo array. Also if Button1.Hint = 'first', then the simple hint message will be shown because hint doesn't start with '+' symbol.

unit Unit1;


  Windows, Classes, Forms, StdCtrls, ExtCtrls, jpeg, Controls;

  TForm1 = class(TForm)
    Button1: TButton;
    Button2: TButton;
    Button3: TButton;
    procedure FormCreate(Sender: TObject);
  TMyHintWnd = class(THintWindow)
      img : TImage;
      lbl : TLabel;
      constructor Create(AOwner : TComponent); override;
      destructor  Destroy; override;
      procedure   ActivateHint(Rect: TRect; const AHint: string); override;

  Form1: TForm1;

  HintInfo : array [0..1] of record
    id   : string;
    pic  : string;
    info : string;
  end = (
    (id: 'first' ; pic: 'D:\`serwer\pukjiite.jpg'; info: 'some unuseful info'),
    (id: 'second'; pic: 'D:\`serwer\tbr.jpg'     ; info: 'blahybla'          )


{$R *.dfm}

constructor TMyHintWnd.Create(AOwner : TComponent);
img := TImage.Create(self);
with img do begin
  Parent := self;
  Left   := 10;
  Top    := 10;
  Width  := 128;
  Height := 128;
lbl := TLabel.Create(self);
with lbl do begin
  Parent := self;
  Left := 150;
  top := 20;

destructor TMyHintWnd.Destroy;

procedure TMyHintWnd.ActivateHint(Rect: TRect; const AHint: string);
  hint : string;
  n : integer;
hint := ahint;
img.Visible := false; // hide 'extra' components, because it's not needed to show
lbl.Visible := false; //   them in common hints
if hint[1] = '+' then begin // check if this is 'special' hint
  delete(hint, 1, 1);
  for n := 0 to high(HintInfo) do begin // search for information
    if HintInfo[n].id = hint then begin // found info, show it
      img.Picture.LoadFromFile(HintInfo[n].pic); // load image
      lbl.Caption := HintInfo[n].info; // show some info
      rect.Right := rect.Left + 350; // set width  of hint window
      rect.Bottom := rect.Top + 148; // set height of hint window
      img.Visible := true; // show image
      lbl.Visible := true; // show label
      hint := ''; // delete hint message
      break; // stop searching for information
inherited ActivateHint(rect, hint);

procedure TForm1.FormCreate(Sender: TObject);
HintWindowClass := TMyHintWnd;

ZhaawZSoftware DeveloperCommented:
You can create a simple form and use it as a hint.
ZhaawZSoftware DeveloperCommented:
Forgot to say - if you want to change background color of hint, just assign desired color to Application.HintColor in TForm().onCreate event
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

GreenandroidAuthor Commented:
Your example compiles fine for me, but your customised hints do not show (instead i get the normal style hints).
I am also dubious whether your code would be the most efficient method for producing the hint boxes (as shown in the link i gave above). Perhaps you could send me a working example, my details you can find in my profile.
As ZhaawZ mentioned why dont u create a form ?
ZhaawZSoftware DeveloperCommented:
Check your e-mail.
GreenandroidAuthor Commented:
i think you forgot to attach the file. could you resend please
ZhaawZSoftware DeveloperCommented:
You wrote that you're dubious whether my code would be the most efficient method. I used Delphi help to customize hint window, so I think this way should be good enough.

As I already said - you may create some form that would be used like hint window where you show information, but it will not be real delphi hint window then. However, it can be much easier to create and use such window for somebody.

Btw, if you want the most efficient solutions, stop using Delphi Forms, SysUtils and other huge units with lots of unnecessary crap ;)
ZhaawZSoftware DeveloperCommented:
Check it again. Now it should be with attachment.
GreenandroidAuthor Commented:
Absolutely perfect!

Many thanks
ZhaawZSoftware DeveloperCommented:
Does it work now? If yes, what was the problem before (why didn't it work for you)?
GreenandroidAuthor Commented:
Yes it works fine now. I think the problem was i misread how to notify when a customised hint was needed, and hence i did not include '+' in the hint text.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.