Hotspot image

<div class="mp c-hotspot-image" role="img" aria-label="Interactive image with hotspots">
  <img src="https://dam.malvernpanalytical.com/3f407d1c-a153-4806-ab9e-b1bf00d41bc5/2524009%20MALV%20Infographic%20Analycial%20process_WITHOUT_TEXT_ModAW_Original%20file.jpg" alt="Description of the image" role="presentation">
  <p class="mp c-hotspot-image__heading" style="top: 2.75%; left: 2.75%;" aria-labelledby="image-heading">
  All the elements of an integrated analytical workflow</p>
  <div class="mp c-hotspot-image__hotspot" style="top: 46%; left: 29%;" aria-live="polite">
    <button class="mp c-hotspot-image__button" role="button" aria-expanded="false" aria-controls="tooltip-1"aria-label="Preparing your sample">
    Preparing your sample</button>
    <div id="tooltip-1" class="c-hotspot-image__tooltip" role="tooltip"aria-hidden="true">
      <ul class="o-grid o-grid--of-two"><li class="u-bg-white u-pad-2xs">Sample preparation methods & advice</li><li class="u-bg-white u-pad-2xs">Labware and accessories</li><li class="u-bg-white u-pad-2xs">Instruments for flux dosing and fusion</li><li class="u-bg-white u-pad-2xs">Methods and advice</li></ul>
    </div>
  </div>
  <div class="mp c-hotspot-image__hotspot" style="top: 28.75%; left: 70%;" aria-live="polite">
    <button class="mp c-hotspot-image__button" role="button" aria-expanded="false" aria-controls="tooltip-2"aria-label="Analysis with XRF">
    Analysis with XRF</button>
    <div id="tooltip-2" class="c-hotspot-image__tooltip" role="tooltip"aria-hidden="true">
      <ul class="o-grid o-grid--of-two"><span class="u-margin-0"></span><li class="o-grid o-grid--of-two u-align-items-start u-margin-0" style="flex-basis: 100%;"><span class="u-bg-white u-pad-2xs">XRF application methods</span><ul class="u-flow--2xs"><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Templates in i.e., Wroxi</li><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Application Support</li></ul></li><span class="u-margin-0"></span><li class="o-grid o-grid--of-two u-align-items-start u-margin-0" style="flex-basis: 100%;"><span class="u-bg-white u-pad-2xs">Certified reference materials</span><ul><li class="u-bg-petrol u-petrol-step-3 u-pad-2xs">Off-the-shelf and customized</li></ul></li><li class="u-bg-white u-pad-2xs">Expertise support</li><li class="u-bg-white u-pad-2xs">Pre-calibration</li><li class="u-bg-white u-pad-2xs">XRF instruments and maintenance</li></ul>
    </div>
  </div>
  <div class="mp c-hotspot-image__hotspot" style="top: 67.75%; left: 76%;" aria-live="polite">
    <button class="mp c-hotspot-image__button" role="button" aria-expanded="false" aria-controls="tooltip-3"aria-label="Reporting results">
    Reporting results</button>
    <div id="tooltip-3" class="c-hotspot-image__tooltip" role="tooltip"aria-hidden="true">
      <ul class="o-grid o-grid--of-two"><li class="u-bg-white u-pad-2xs">Seamless connection to LIMS</li><li class="u-bg-white u-pad-2xs">Training Instrument operation training</li><li class="u-bg-white u-pad-2xs">Data interpretation</li><li class="u-bg-white u-pad-2xs">XRF Application training</li><li class="u-bg-white u-pad-2xs">Sample preparation training</li></ul>
    </div>
  </div>
  <div class="mp c-hotspot-image__hotspot" style="top: 85%; left: 48.5%;" aria-live="polite">
    <span class="mp c-hotspot-image__button c-hotspot-image__button--no-tooltip" role="button"aria-label="Training">
    Training</span>
  </div>
</div>

{
  "image": {
    "src": "https://dam.malvernpanalytical.com/3f407d1c-a153-4806-ab9e-b1bf00d41bc5/2524009%20MALV%20Infographic%20Analycial%20process_WITHOUT_TEXT_ModAW_Original%20file.jpg",
    "alt": "Description of the image"
  },
  "heading": {
    "position": "top: 2.75%; left: 2.75%;",
    "content": "All the elements of an integrated analytical workflow"
  },
  "hotspots": [
    {
      "position": "top: 46%; left: 29%;",
      "button": {
        "label": "Preparing your sample"
      },
      "tooltip": {
        "content": "<ul class=\"o-grid o-grid--of-two\"><li class=\"u-bg-white u-pad-2xs\">Sample preparation methods & advice</li><li class=\"u-bg-white u-pad-2xs\">Labware and accessories</li><li class=\"u-bg-white u-pad-2xs\">Instruments for flux dosing and fusion</li><li class=\"u-bg-white u-pad-2xs\">Methods and advice</li></ul>"
      }
    },
    {
      "position": "top: 28.75%; left: 70%;",
      "button": {
        "label": "Analysis with XRF"
      },
      "tooltip": {
        "content": "<ul class=\"o-grid o-grid--of-two\"><span class=\"u-margin-0\"></span><li class=\"o-grid o-grid--of-two u-align-items-start u-margin-0\" style=\"flex-basis: 100%;\"><span class=\"u-bg-white u-pad-2xs\">XRF application methods</span><ul class=\"u-flow--2xs\"><li class=\"u-bg-petrol u-petrol-step-3 u-pad-2xs\">Templates in i.e., Wroxi</li><li class=\"u-bg-petrol u-petrol-step-3 u-pad-2xs\">Application Support</li></ul></li><span class=\"u-margin-0\"></span><li class=\"o-grid o-grid--of-two u-align-items-start u-margin-0\" style=\"flex-basis: 100%;\"><span class=\"u-bg-white u-pad-2xs\">Certified reference materials</span><ul><li class=\"u-bg-petrol u-petrol-step-3 u-pad-2xs\">Off-the-shelf and customized</li></ul></li><li class=\"u-bg-white u-pad-2xs\">Expertise support</li><li class=\"u-bg-white u-pad-2xs\">Pre-calibration</li><li class=\"u-bg-white u-pad-2xs\">XRF instruments and maintenance</li></ul>"
      }
    },
    {
      "position": "top: 67.75%; left: 76%;",
      "button": {
        "label": "Reporting results"
      },
      "tooltip": {
        "content": "<ul class=\"o-grid o-grid--of-two\"><li class=\"u-bg-white u-pad-2xs\">Seamless connection to LIMS</li><li class=\"u-bg-white u-pad-2xs\">Training Instrument operation training</li><li class=\"u-bg-white u-pad-2xs\">Data interpretation</li><li class=\"u-bg-white u-pad-2xs\">XRF Application training</li><li class=\"u-bg-white u-pad-2xs\">Sample preparation training</li></ul>"
      }
    },
    {
      "position": "top: 85%; left: 48.5%;",
      "button": {
        "label": "Training"
      }
    }
  ]
}