JQuery Cluetip APEX implementation

Nice Cluetip implementation by Netflix

I love a website that uses tooltips and cluetips well. They’re a great way to provide additional information to a user without cluttering up the page, and of course, they also look really cool. :-)

My first stop, as always, when wanting to add a ‘cool’ feature to an APEX app, is the APEX Community-based plugin repository. A quick search for Tooltip and Cluetip yielded one I have recently been using in most of my apps: a Tooltip Dynamic Action Plugin, whose content can be retrieved via a number of methods, including PL/SQL. I use this one to display tooltip help for my application items, pretty much exactly as the instructions say on the demo page. Works great, why reinvent the wheel!

But what if you have a great APEX region on your page that you decide would best be implemented as a Tooltip/Cluetip. This could be a Report Region, a Form Region, a Dynamic PL/SQL region, or even a Chart Region. You’ve already done the work implementing it on your page, and it is certainly quicker than coding a new PL/SQL procedure to render it as a tooltip.

I visited the JQuery Cluetip Plugin page, and scanned the demo page for something interesting to use. One of them uses local content from a hidden <div> element, which struck me as a good candidate for my requirements. I downloaded the source, and set to work, referring back to a presentation I saw a couple of years ago on the Sumneva site.

Step 1: Jquery includes

You can either add these to a Page 0, so they render on every page of your app if you plan on using this feature a lot, or you can add them to a specific page. Either way, you will want to add a new region to your page, with the following specs:

No Template
Display Point: After Header
Region Source: links to your uploaded jquery source files as follows:

Step 2: Cluetip Function

As in the previous step, you will want to add this region either to your Page 0, or individual pages that will be calling the Cluetip function.

No Template
Display point: Before Footer
Region Source: function call, using the JQuery selector of your choice. In my case, it is ‘a.load-local’ as follows:

Step 3: Create a new Basic Div Region Template, if you do not already have one.

Shared Components –> Templates –> Create –> Region –>From Scratch

Step 4: Identify the region on your page that provides the Cluetip content

This could be any region on your page, including Chart regions! Change the region’s template to use your Basic Div template that you just created.

You will also want to provide it with a Static ID in the Attributes section. In my example, I used ‘loadme’.

Step 5: Create a new Label template that will serve as your Cluetip/Tooltip anchor

In my example, notice the use of ‘id=load-local’ which is what I used as JQuery selector in Step 2. Also notice the use of #loadme, which the value of the Static ID I used in Step 4, region providing the Cluetip content.

Step 6. Add an item to your page, using your Tooltip template, and run your page! Hovering over your newly created item will display a nice Cluetip with the contents from your hidden <div> region! I’ve tried rendering several different region types, and it works like a charm. Although the chart below is meaningless, it is just to provide an example of a Chart rendered in a Cluetip, when hovering over the ‘Notes’ field.