💬 HTML Tooltips - GEO Map Hub Plugin

HTML Tooltip displays rich, styled content when hovering over specific regions. It supports custom HTML (e.g., images, tabs, and styled text) defined per region in map_config. The tooltip includes hover color states and is injected into the container using IDs from general_config. Ideal for showcasing detailed info like university profiles, addresses, and contacts.

📘 What is HTML Tooltips?

The HTML Tooltip Plugin enhances the default tooltip functionality by enabling rich HTML content per region. Instead of plain text, you can include images, styled text, tabs, and more.

💡 Use Case

• Display detailed information about locations (like universities, landmarks).

• Show rich media and organized content within a floating tooltip.

• Create an engaging, branded map experience.

📁 Folder Structure

Make sure the following files are correctly placed:

your-project/
├── gmh-plugin/
│    ├── assets/
│    │    ├── css/
│    │    │    └── style.css
│    │    ├── js/
│    │    │    └── script/
│    │    │    │    ├── geomaphub.js
│    │    │    │    └── lib/
│    │    │    │    │   ├── feature-gmh.js                      // add feature plugin files
│    │    │    │    │   └── interactive-tooltip-gmh.js          ← Required for interactive (tooltips and links.)
│    ├── data/
│    │    ├── us/                                               // Required Country
│    │    │    ├── map-content.js
│    │    │    └── us.svg
│ index.html

HTML Predefined Designs

Design One

<div class="design-one-gmh" style="border: 1px solid #f3faff;">
  <p class="heading-gmh"><strong>San Diego State University</strong></p>

  <div class="description-wrapper-gmh">
    <img src="/gmh-plugin/assets/images/custom-tooltip-designs/design-one.jpg" alt="San Diego State University" />

    <p>
      <strong>San Diego State University (SDSU)</strong> is a public research university in San Diego, California,
      United States. Founded in 1897, it is the third-oldest university and southernmost in
      the 23-member <strong>California State University (CSU) system</strong>. SDSU is the oldest higher
      education institution in San Diego; its academic roots were established as a normal
      school in University Heights, then known as the San Diego Normal School.
    </p>
  </div>

  <div class="nav-tabs-gmh">
    <div class="tab-heading-gmh">
      Address
    </div>

    <div class="tab-para-gmh">
      San Diego State University, San Diego, CA, United States
    </div>
  </div>

  <div class="nav-tabs-gmh">
    <div class="tab-heading-gmh">
      Contact
    </div>

    <div class="tab-para-gmh">
      Phone: 056-50438-4574
    </div>
  </div>
</div>

San Diego State University

San Diego State University (SDSU) is a public research university in San Diego, California, United States. Founded in 1897, it is the third-oldest university and southernmost in the 23-member California State University (CSU) system. SDSU is the oldest higher education institution in San Diego; its academic roots were established as a normal school in University Heights, then known as the San Diego Normal School.

Address

San Diego State University, San Diego, CA, United States

Contact

Phone: 056-50438-4574

Design Two

<div class="design-two-gmh" style="border: 1px solid #f3faff;">
  <div class="image-wrapper-gmh">
    <img src="/gmh-plugin/assets/images/custom-tooltip-designs/design-two.jpg" alt="New Light Beulah Baptist Church" />
  </div>

  <div class="description-wrapper-gmh">
    <p class="subheading-gmh"><strong>Churches</strong></p>

    <p class="heading-gmh"><strong>Zion's Light Baptist Church</strong></p>

    <p>
      The United Zion Church is a small Christian denomination with roots in the
      Mennonite church and German pietism
    </p>
  </div>
</div>

Churches

Zion's Light Baptist Church

The United Zion Church is a small Christian denomination with roots in the Mennonite church and German pietism

Design Three

<div class="design-three-gmh">
  <div class="image-wrapper-gmh" style="width: auto;">
    <img
      src="/gmh-plugin/assets/images/custom-tooltip-designs/design-three.jpg"
      alt="Tall trees in the forest in the mountains covered with the fog" />
  </div>

  <div class="info-wrapper-gmh">
    <div class="info-gmh">Mountain</div>
    <div class="info-gmh">Forest</div>
  </div>
</div>

Mountain

Forest

Design Four

<div class="design-four-gmh">
  <div class="left-image-wrapper-gmh">
    <img src="/gmh-plugin/assets/images/custom-tooltip-designs/design-four.jpg" alt="Design Four" />
  </div>

  <div class="right-content-wrapper-gmh">
    <p><strong>Name Surname</strong></p>

    <p>Busniess Development Manager</p>

    <p>Phone: (000) 123-4567</p>

    <p>Fax: (000) 123-4567</p>

    <p>Email: name@domainname.com</p>
  </div>
</div>

Name Surname

Busniess Development Manager

Phone: (000) 123-4567

Fax: (000) 123-4567

Email: name@domainname.com

✅ Configuration Breakdown

For Simple Countries (e.g. US, DE ...)

export const map_config = [
  {
    "targetClass": "US-WA",  // Unique identifier for region.
    "name": "Washington",  // Display name for the region.

    /*
     * Regions With Different Colors Configuration
    */
    "color_region": {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    /*
     * Text Label Configuration
    */
    "text_label": {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    /**
     * Marker Configuration
    */
    "markers": [
      {
        "targetClass": "MARKER-US-WA-1",  // Unique identifier for this marker.

        /*
          * Colored Marker Configuration
        */
        "color_marker": [
          {
            "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

            // Other Configurations
          },
        ],

        /*
          * Custom Image Marker Configuration
        */
        "image_marker": [
          {
            "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

            // Other Configurations
          },
        ],

        /*
          * Label Marker Configuration
        */
        "label_marker": [
          {
            "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

            // Other Configurations
          }
        ],

        /*
          * Vector Marker Configuration
        */
        "vector_marker": [
          {
            "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

            // Other Configurationss
          }
        ]
      }
    ],

    /*
     * Display Content Outside The Map Configuration
    */
    "display_content_outside_the_map": {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    /*
     * Colored Legend Configuration
    */
    "colored_legend": {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    /*
     * External Search and Select Configuration
    */
    "external_search_select": {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    /*
     * Heat Map Configuration
    */
    "heat_map": {
      "html_content": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    /*
     * Open Content in Lightbox Configuration
    */
    "open_content_in_lightbox": {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    /*
     * Trigger Custom JavaScript Configuration
    */
    "trigger_custom_js": {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    // Other Configurations
  },

  // Other Configurations
];

/*
 * Group Map Configuration
*/
export const group_map_config = [
  {
    "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

    // Other Configurations
  },

  // Other Configurations
];

/*
 * Line Connecting Marker Configuration
*/
export const connecting_lines = {
  /*
   * Marker Configuration
  */
  "markers": {
    /*
     * Colored Marker Configuration
    */
    "color_marker": [
      {
        "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

        // Other Configurations
      },
    ],

    /*
     * Vector Marker Configuration
    */
    "vector_marker": [
      {
        "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

        // Other Configurations
      }
    ],
  },

  // Other Configurations
};

/*
 * live filter Configuration
*/
export const live_filter = {
  // List of markers to be displayed on the map
  "markers": [
    {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    }
  ],

  // Other Configurations
};

For Drill-Down Countries (e.g. US, DE ...)

export const drill_down_map_config = [
  {
    // Other Configurations

    "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

    "region": [
      {
        "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

        // Other Configurations
      },

      // Other Configurations
    ],
  },

  // Other Configurations
]

For World Map Color Countries Feature

export const map_config = [
  {
    "targetClass": "AF-GMH",
    "name": "Afghanistan",

    "color_country": {
      "tooltip": `<div>Custom Tooltip</div>`, // Tooltip text displayed when hovering over the marker.

      // Other Configurations
    },

    // Other Configurations
  },

  // Other Configurations
];

⚠️ Local CORS Warning

If you're testing with a .html file locally and see this error:

Access to script at 'file:///...' from origin 'null' has been blocked by CORS policy...

It means you're loading the file using the file:// protocol.

✅ How to Fix

Option 1: Use a Local Server (Recommended for HTML)

• Live Server (VS Code Extension)

  Install Live Server, right-click your HTML, and choose “Open with Live Server”.

• Or use any other local server:

  # Python 3
  python -m http.server
  
  # Node.js
  npx http-server
  
  # PHP
  php -S localhost:8080
  

• Or use a local web server (e.g., XAMPP or Laragon)

Option 2: Deploy to a Real Server

You can upload your files to:

• Your cPanel or shared hosting

• A staging VPS or domain

Once the files are accessible via http:// or https://, the plugin works without issues.