Customizing Tooltips in Oracle APEX Interactive Grids | Javascript

August 22, 2025Posted inAPEX, Interactive Grid

In Oracle APEX, customizing the user interface and enhancing usability is often achieved by leveraging JavaScript. One such enhancement is creating dynamic tooltips for Interactive Grids. This blog will delve into a JavaScript configuration that demonstrates defining custom tooltips based on specific column properties and row metadata.

The JavaScript Code Explained

The provided JavaScript function modifies the Interactive Grid’s configuration object to introduce dynamic tooltips for specific columns. Below is a breakdown of the key features:

  • Disabling Initial Selection
Copy Code
config.initialSelection = false;

This ensures that no rows are preselected when the grid is initially loaded.

  • Preventing Copying of Grid Content
Copy Code
config.defaultGridViewOptions = {
    allowCopy: false,
};

By setting allowCopy to false, the function disables the ability to copy grid content directly. This can be particularly useful in scenarios where sensitive information is displayed, such as confidential business data or regulatory compliance contexts, where unauthorized copying could lead to breaches or misuse of information.

  • Dynamic Tooltip Configuration The tooltip property is customized to display meaningful information based on the row and column context:
Copy Code
tooltip: {
    content: function(callback, model, recordMeta, colMeta, columnDef) {
        var text = null;
        
        if (recordMeta && $(this).hasClass("a-GV-rowHeader")) {
            if (recordMeta.updated) {
                text = "This record has been changed";
            }
        } else {
            if (columnDef && recordMeta) {
                if (columnDef.property === "EMPNO") {
                    text = model.getValue(recordMeta.record, "EMPNO");
                } else if (columnDef.property === "ENAME") {
                    text = model.getValue(recordMeta.record, "ENAME");
                } 
            }
        }

        return text;
    }
}
  1. Key Points:
    • Row-Level Tooltip: If the user hovers over a row header, the tooltip indicates whether the record has been updated.
    • Column-Specific Tooltip: For specific columns (EMPNO and ENAME), the tooltip dynamically displays the respective cell value.
  2. Returning the Modified Configuration Finally, the function returns the modified configuration object to ensure the grid applies these settings:return config;

Use Cases for This Customization

  • Highlighting Changes: The tooltip alerts users when a record has been modified, ensuring they quickly notice updates.
  • Enhanced Data Context: Column-specific tooltips provide additional details without cluttering the grid layout.
  • Improved User Experience: By dynamically adjusting tooltips, users can access relevant information seamlessly.

How to Implement This in Oracle APEX

To integrate this configuration into your Oracle APEX application:

  1. Navigate to the Attributes section of your Interactive Grid.
  2. In the Advanced settings, locate the JavaScript Initialization Code section.
  3. Paste the provided function code into the editor.

Conclusion

Customizing tooltips in Oracle APEX Interactive Grids can significantly enhance the application’s usability and provide a more intuitive user experience. By leveraging JavaScript, as demonstrated in this blog, you can tailor the behavior of your grid to meet specific requirements and improve data presentation for end-users.

Tags: