Skip to Main Content

Breadcrumb

Overview

The FOS - Tooltip dynamic action plug-in offers a simple and powerful solution to extend any APEX application with fancy tooltips. Based on the popular open source Tippy.js javascript library, we have added plenty of great features and customization capability that you can take advantage of.

You can choose from different source options e.g. static, DOM attribute, SQL query, or PL/SQL, meaning your content can be static or dynamically fetched from the database with the option to cache the results for maximum efficiency.

Examples

Basic Example

Implement tooltips to give your users more information!

Define the source

There are four options provided in the "Source" attribute to define the source of the tooltip's content: "Static Text", "Defined in Attribute", "SQL", and "PL/SQL Function body returning VARCHAR2".

Static Text

Use the "Static Content" type when the content of the tooltip is always the same i.e. it doesn't change. A popular use case, as per the example below, is when you would like to show a tooltip for every required filed on the page, instead of naming all the page items in the "Affected Elements" you could instead use a "jQuery selector": input[required]

Defined in Attribute

To display the content of a DOM attribute as a tooltip, simply provide the name of the attribute in the "Source Attribute" setting. In the example below using this technique, you can type into the Set the attribute text field, which will automatically update the Target Button button DOM element's data-fos-tooltip attribute and show this content in the tooltip when hovering over the button.

 
 

Dynamic

The "SQL" and "PL/SQL Function body returning VARCHAR2" source types enable you to dynamically load the tooltip content from the database. If you reference any page items in your source please ensure you add them to the "Page Items To Submit" attribute.

For extra flexibility you can also submit custom values directly from the affected DOM element's attributes. You can add up to three comma separated names in the "Attributes to Submit" field. You can then access these values using the following application items G_FOS_TOOLTIP_ATTR_1, G_FOS_TOOLTIP_ATTR_2 and G_FOS_TOOLTIP_ATTR_3.

Note: these Application Items will be created automatically the first time you run a page with this plugin. This requires "Runtime API Usage" Application Security Attribute set to "Modify this application". Once the items have been created you can then disable this setting.

SQL

By default, the source query must return exactly one column and one row, the returned value will be displayed in the tooltip. Select a name from the list below and the tooltip will show you where is the selected person is coming from.

 

If the business requirement is more complex i.e. multiple columns have to be displayed, or custom styling is required, you can use the "HTML Expression" attribute to define the tooltip contents. Using #COLUMN# syntax you can substitute column values from your SQL results in the HTML code.

Important: In order to properly render the provided HTML, the "Escape HTML" option must be disabled.

In the example below, hover over a row in the Interactive Grid and you'll see the "avatar", the "job" and the "city" of an employee. We also added some static tooltips on the column headers to show you how to do this as well.

Dynamic - SQL Example Grid

Points to Note!

For optimal performance, if you know that the tooltip content won't change after initialization, check the "Cache Result" option to store the result in memory.

The "No Data Found Text" and the "Loading Text" - which is shown while we're waiting for the response - can be set either at the application level using "Component Settings" or individually by overriding the respective "noDataFoundText" and "loadingText" attributes in the "Javascript Initialization Code" field e.g. 


function(options) {
   options.loadingText = 'Please wait....';
   options.noDataFoundText = 'Could not locate any information!';
   return options;
}

Color, Placement, and Animation

Thanks to the many declarative attributes the plug-in provides, it's possible to customize almost every detail of the tooltip, with only a few clicks. By default, the tooltip can be placed in four different ways in relation with to the reference element.

Note: if a tooltip cannot fit within its desired placement, it will flip to the opposite placement if there is not enough space.

 

Overriding Placement

You can further adjust the placement using the "Javascript Initialization Code" attribute e.g. 


function (options) {
   // show the tooltip at the top on the left
   options.placement = 'top-start';
   return options;
}

 

Triggers, duration, rendering, and delay

You can trigger tooltips on hover or click, adjust the the "Duration", "Display On" and "Escape HTML" attributes for further refinement. See the help text of the "Javascript Initialization Code" for the extra settings which can be adjusted/overridden for greater control e.g. more placement, follow cursor, and delay capability.

 

Overriding Delay

You can further adjust the delay using the "Javascript Initialization Code" attribute e.g. 


function (options) {
   // show the after a 1 second delay and add a 1 second delay before fading out
   options.delay = [1000,1000];
   return options;
}

Complex Content

In this example, we are combining some of the mentioned features above, including using "HTML Expressions", to create tooltips that behave more like an interactive region rather than just static text.

  • KING
    Address: 45020 Aviation Drive, Sterling, VA

  • BLAKE
    Address: 6000 North Terminal Parkway, Atlanta, GA

  • CLARK
    Address: 1 Harborside Drive, East Boston, MA

  • JONES
    Address: 10000 West OHare, Chicago, IL

  • SCOTT
    Address: Hangar Center, Flushing, NY

  • FORD
    Address: 10701 Lambert International Blvd., St. Louis, MO

Click on one of the list entries on the left and you'll see a tooltip that contains the avatar of selected the employee, plus a textarea input field and two buttons below.

Using "PL/SQL Function Returning VARCHAR2" - we can create our own HTML markup and even set up our own dynamic actions on button click.

In this example after clicking on one of the buttons a notification will appear containing the selected employees's ID and the entered comment.

Design

You can preview the plug-in setup as you would see it in page designer. You can either do this by clicking this button in the top right corner of each example, or you can see all the examples together in the region below.

Looking at the examples you'll see just how easy the plug-in is to use. Don't worry about changing any values as they aren't saved. We actually encourage you to change them, so you can see the behaviour of the attributes and their help text.

FAQ

  • The tooltip is not working with disabled buttons/items, what's wrong?

    It's a known issue and unfortunately there's no real solution, only a workaround to handle the situation, which is basically to add a wrapper the disabled element.(Read more about it in this GitHub issue.)

  • I added tooltips to report/grid cells, but they're gone after refresh. What can I do?

    If your affected elements are rendered after the initialization of the plug-in i.e. dynamically, then you should ensure that your dynamic action "Event Scope" attribute is set to "Dynamic" or you listen to an event that is called every time the content is rendered like "After Refresh" or "Page Change[Interactive Grid]".