How do I Add a tool tip information to a map

 

Introduction
When building interactive Map components in Oracle APEX, tooltips provide a simple yet powerful way to enhance the user experience. By displaying relevant details when hovering over a map marker or shape, users can quickly gather contextual information without needing to click or navigate away. Adding tooltip information to a map region allows you to present key insights like names, addresses, statuses, or numeric values in a compact and user-friendly format.

Detailed Instructions: How to Add Tooltip Information to a Map in Oracle APEX

To add tooltips to a map in Oracle APEX, follow these detailed steps:

1. Create or Edit a Map Region

   • Open your application in Page Designer.

   • Select an existing Map region or create a new one by adding a Map region to your page.

2. Set Up Your SQL Query with Tooltip Data

   • Your data source must include a column with the information you want to show in the tooltip.

   • Example:

     SELECT 
       id,
       store_name AS name,
       latitude,
       longitude,
       'Store: ' || store_name || '<br>Status: ' || status AS tooltip_text
     FROM store_locations
     

   • The concatenated string becomes your tooltip content. Use HTML (like <br>) to format multiline tooltips if needed.

3. Assign the Tooltip Column to the Marker Layer

   • In the Map Attributes section, go to Marker Layer > Tooltip.

   • Choose the column you defined for tooltips (e.g., tooltip_text).

   • This tells APEX to show that column’s content when a user hovers over a map marker.

4. Optional: Use HTML or CSS for Styling

   • You can add simple HTML (line breaks, bold text) or apply inline styles if HTML Escaping is disabled.

   • Example:

     '<b>' || store_name || '</b><br><span style="color:gray">Status: ' || status || '</span>'
     

5. Preview and Test

   • Run the page and hover over map markers.

   • Tooltips should now display the assigned content.

   • If nothing appears, ensure the Tooltip field is correctly mapped, and HTML escaping is set appropriately.

6. Advanced (Optional): Use Dynamic Tooltips

   • Tooltips can also be generated dynamically using PL/SQL functions or LOVs if you want to display real-time values or multilingual data.

 

Adding a Tooltip to a Map Faceted Report in Oracle APEX

A Map Faceted Report in Oracle APEX provides users with an interactive way to visualize data based on geographic locations while allowing them to refine results using facets. Adding a tooltip enhances the user experience by displaying additional details when they hover over map points, allowing them to get more information without clicking or navigating away.

 

Why Use Tooltips in a Map Faceted Report?

Tooltips provide an efficient way to show extra details about a location without cluttering the interface. They allow users to quickly understand key attributes of a map point, such as address, population, revenue, or other relevant information.

 

Steps to Add a Tooltip to a Map Faceted Report

Step 1: Create a Map Faceted Report

1. Open App Builder in Oracle APEX and navigate to your application.

2. Click Create Page and select Faceted Search under the Report section.

3. Choose a table or SQL query containing location-based data (such as latitude and longitude).

4. Click Next, set up the page attributes, and click Create.

5. Once the report is created, go to Page Designer and locate the Map Report Region.

 

Step 2: Enable Tooltips for Map Points

1. Select the Map Region in Page Designer.

2. Open the Attributes section and find the Tooltip settings.

3. In the Tooltip Column option, choose the column that contains the text you want to display in the tooltip.

4. If no tooltip column exists in the dataset, create a custom SQL Query to concatenate necessary information: 

SELECT location_name, latitude, longitude, 

       'Address: ' || address || '<br>Population: ' || population AS tooltip_info

FROM locations_table;

5. Save the changes and run the report. Now, hovering over a map point will display the information from the selected tooltip column.

 

Step 3: Customize the Tooltip Appearance Using CSS

APEX allows styling tooltips using CSS to improve readability.

1. Navigate to Shared Components → Themes → CSS.

2. Add the following CSS code to customize tooltip appearance: 

.apex-map-tooltip {

    background-color: rgba(0, 0, 0, 0.8);

    color: white;

    padding: 8px;

    border-radius: 5px;

    font-size: 12px;

}

3. Save the CSS changes and refresh the page to see the customized tooltip.

 

Step 4: Enhancing Tooltips with JavaScript for Dynamic Content

To further enhance tooltips, use JavaScript to display dynamic content:

1. Open Page Designer and select the Map Region.

2. In the JavaScript section, add a dynamic action triggered on Mouse Over for map points.

3. Add the following JavaScript to format and enhance tooltips dynamically: 

function customizeTooltip(mapPoint) {

    return `<b>${mapPoint.location_name}</b><br>

            Address: ${mapPoint.address}<br>

            Population: ${mapPoint.population}`;

}

apex.region("map_region_static_id").widget().on("mouseover", ".a-map-point", function(event) {

    let tooltipContent = customizeTooltip(event.data);

    apex.tooltip.show(event.target, tooltipContent);

});

4. Save the changes and test the tooltip behavior.

 Best Practices for Tooltips in Map Faceted Reports

• Keep tooltip text concise to avoid overwhelming users.

• Use HTML formatting to make the tooltip content more readable.

• Ensure tooltips contain relevant and useful information based on the use case.

• Optimize the dataset query to avoid performance issues when rendering tooltips.

• Test tooltips on different devices to ensure usability across various screen sizes.

 

Adding tooltips to a Map Faceted Report in Oracle APEX enhances the user experience by providing contextual information without requiring extra clicks. Using APEX’s built-in tooltip options, custom CSS styling, and JavaScript enhancements, developers can create visually appealing and informative tooltips that improve usability and data exploration.

EXAMPLE:

Step 1 – click on the Layer that you’re wanting to use for the tip placement.

Step 2-  Select the Tool Tip area and switch to “Advanced Formatting”.

Step 3 – Add the HTML and table tags to display the data

Here is the code:

Location code: &LOCATION_CODE. <br>

Location name: &LOCATION_NAME.<br>

Address: &ADDRESS_LINE_1.<br>

City: &CITY.<br>

State: &STATE_OR_PROVINCE.<br>

Postal Code: &POSTAL_CODE.<br>

Weather Station: &WEATHER_STATION.<br>

Notice that:

• Table column names are ALL upper case

• Table column names start with a “&” and end with a period “.”

• You can mix HTML and the column names to generate the tool tip.

Save and preview

Conclusion
Adding tooltips to map markers in Oracle APEX significantly improves how users interact with spatial data. Tooltips provide instant, relevant information without cluttering the map or requiring additional clicks. Whether you're showing store details, customer metrics, or delivery statuses, tooltips offer a simple and elegant way to make your Map Reports more informative and user-friendly. With just a few steps, you can enrich your application’s usability and deliver a better visual experience to your users.