A question often asked by users, is the addition of custom tooltips with extended functions (like line breaks or formatting) to Application Express. There is no default functionality in Apex for that, other than the standard alt or title tag in HTML, which I think is rather boring and not so flexible.
There is a more versatile and nice looking alternative for that, called qTip2. It’s an extension for JQuery, which is already incorporated in Apex since version 4.0.
I found it a little challenging to get qTip2 working in Apex, so here’s a how-to for you.
- go to the Edit Page section and add this to the HTML Header Atribute :
<link type="text/css" rel="stylesheet" href="#WORKSPACE_IMAGES#jquery.qtip-2.0.0.css" />
- Add this to the Footer Text Attribute a little lower:
- And add this code to the Function and Global Variable Declaration. It replaces the standard title attributes with the qTip attribute. Mind you: all title attributes on the page. That’s ok, it ensures a consistent look of your tooltips on the page.
- Now let’s give it a try. Create a new Text item on your page, and put this in the Label attribute:
<a href="#" title="Your <i>custom</i> label Tooltip">A tooltip label</a>
- And look at the result:
Of course you can also use the syntax used in step 7 in other parts of your page, like report headers, poplists or just plain text.