Crossbrowser, multi-line hints in Intraweb

Yesterday I saw a post in Embarcadero forums asking how to create multi-line hints in a IWGrid, inside an Intraweb application.
Well, this doesn't have a simple answer because IWGrid cells are TD HTML tags, and the hint is the title attribute. There is no reliable way to make the title attribute break lines across browsers. It is doable in IE but not in Firefox, for instance.
I will show you a technique that can be used in your Intraweb application to customize the hints. I will use a small javascript library in this example, but other library can be used as well. I'm using one of the simplest solutions I've found, from Craige Erskine, old qTip. The advantage of this release of qTip is that it is simple, compact and doesn't require another JavaScript library (jQuery, etc). It is composed of two files only: qTip.js and qTip.css. I have modified this release of qTip a little because it was replacing the windows.onload event with its own handler - not a good thing to do in JavaScript...

Include qTip files in your IWForm

Each form rendered that will use qTip hints need to include qTip files (qTip.js and qTip.css). This is done using one of my utility classes TIWContextHelper (file included in the download), in the FormRender event:

uses
  IWContextHelper;

procedure TMyIWForm.IWAppFormRender(Sender: TObject);
begin
  TIWContextHelper.AddCSSFile(Self.PageContext, 'qTip.css');
  TIWContextHelper.AddJavaScriptFile(Self.PageContext, 'qTip.js', True);
end;

Notes:
1) IWContextHelper expect CSS files to be in /files/css/ subfolder, and JavaScript files to be in /files/js/ sub-folder. This can be changed in IWContextHelper.
2) If the default sub-folders are kept, then you have to set AllowSubFolder of your ServerController instance to TRUE.
3) The JavaScript file must be added to the BODY part of the HTML document. That's why the third parameter of TIWContextHelper.AddJavaScriptFile is TRUE.

Deploy your application

You will have to deploy qTip.js and qTip.css with your application, inside the sub-folders used in step 1. And you are done!

Testing

This is a test using the default "Features" Intraweb demo. I've set the hints to a multi-line string, for each cell in the grid:

Download simple demo

You can download a simple demo with all required files here.

Further notes

1) The project was created using Delphi 2006 + IW 10.0.23 but should run in newer versions without problems.
2) qTip, as included in the zip file, will "qTip-ize" a, label, input and td HTML tags. If you want to add other tags, modify the qTipTag var, inside qTip.js file.
3) Hint windows style can be customized editing qTip.css file.

Enjoy!