💡 Enhancing Oracle APEX Cards with Dynamic Tooltips in Oracle APEX

🚩Introduction 

• In Oracle APEX, Cards are a great way to display data in a clean layout, but sometimes users need more details without making the screen look busy. Dynamic tooltips help solve this by showing extra information when the user hovers over a card.

• By creating tooltip content using a SQL query and applying it to each card with a simple JavaScript snippet, developers can make the interface more interactive. This keeps the application clean, easy to use, and efficient.

📑 Why This Approach Is Needed

In Oracle APEX applications, Cards usually show summary data, but users may also need more details without overloading the interface. Using static tooltips for each card can be repetitive, hard to manage, and less flexible.

Using dynamic tooltips, generated from a SQL query and enhanced with a small JavaScript snippet, solves this issue. They provide relevant, context-based information for each card while keeping the application clean and easy to maintain.

This approach is useful when:

• You want to show extra details for each card without making the UI crowded

• Tooltip content should change dynamically based on database data

• You want to avoid hardcoding tooltip text for multiple cards

• Any updates in data should automatically reflect in tooltips

• The application should feel more interactive and user-friendly

This approach makes the application more flexible, easier to maintain, and improves the user experience with less code duplication.

👉 Use Case: Dynamic Tooltip for Cards in Oracle APEX

In Oracle APEX, Cards usually display only basic or summary information. However, users may need more details without making the interface crowded. Adding tooltips manually for each card is not practical and can become difficult to maintain.

In this blog, we will see how to create dynamic tooltips for each card using a SQL query and a small JavaScript snippet. This allows each card to display its own tooltip based on data, without hardcoding values. This approach keeps the UI clean, makes the application more interactive, and allows tooltip content to be managed easily from a single place, making the application simpler and easier to maintain.

Step 1: 

In the Page Builder, create one region and select the type as Cards and in the source section, select the type as SQL Query and copy paste the sample query below.

----- Card Source : SQL QUERY -----

select 11 as card_title , 'Tooltip : Card1' tooltip from dual
union
select 21 as card_title , 'Tooltip : Card2' tooltip from dual
union
select 31 as card_title , 'Tooltip : Card3' tooltip from dual

Step 2: 

Select the cards region and click on the Attribute tab in the top right corner and in the Card section, select the primary key column in the primary key column1 attribute and select the tooltip column in the primary key column2 attribute.

Step 3: 

Next, under the Title section, select the card title column in the column attribute.

Step 4: 

Now, in the Page designer, navigate to the Execute When Page Loads section and copy paste the below javascript code.

// Execute When Page Loads Section

document.querySelectorAll('.a-CardView-item').forEach(function(el) {
    let data = el.getAttribute('data-id');
    try {
        let arr = JSON.parse(data);   // convert string to array
        if (arr.length > 1) {
            el.title = arr[1];        // second value (tooltip)
            console.log(el.title)
        }
    } catch (e) {
        console.error('Invalid data-id format', data);
    }
});

Step 5: 

Now, Save and run the the Page, you will see the cards region, when you hover the cards the tooltip will be shown. 

🔥 Conclusion

Thus, in Oracle APEX, dynamic tooltips for Cards help display extra information in a simple way without over crowding the screen. By pulling tooltip data from SQL and using a small JavaScript snippet, you avoid repeating the same code for every card. It also makes updates easier since changes can be done in one place. This makes the application more interactive, user-friendly, and easy to maintain while keeping the UI clean and well organized.