UI MarCom 3

Hotspots Stable New variant

With Hotspots the user can explore content by opening detailed information on demand. They are placed as interactive spots on an image or graphic.

<uimc-hotspots
    image-source=""
    items='[]'>
  </uimc-hotspots>

AttributeDescriptionValuesDefault
image-sourceSets the source for background-imagevalid URL
itemsSets the content of the itemsJSON formatted Array

CallbackArgumentDescription
onOpenitemPass a callback function that gets triggered when a hotspot is opened
onCloseitemPass a callback function that gets triggered when a hotspot is closed

Working sample

<uimc-hotspots
      image-source="/ui-marcom/assets/img/brandville/siemens-healthineers-mi-magnetom-sola.jpg"
      items='[{"title": "At First Sight", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:45%; left:22%"}, 
              {"title": "Secondary Usage", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:22%; left:30%"}, 
              {"title": "Third Party", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:33%; left:62%"}, 
              {"title": "May the Fourth", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:66%; left:45%", "direction": "left"}]'>
  </uimc-hotspots>

Labeled Hotspots

Added in 3.2
<uimc-hotspots
          image-source="/ui-marcom/assets/img/brandville/siemens-healthineers-mi-magnetom-sola.jpg"
          items='[{"title": "At First Sight", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:45%; left:22%", "label": "Click here", "direction": "right"}, 
                  {"title": "Secondary Usage", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:22%; left:30%", "label": "Try this", "direction": "right"}, 
                  {"title": "Third Party", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:33%; left:62%", "label": "Curiousity", "direction": "right"},
                  {"title": "May the Fourth", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:62%; left:69%", "label": "New Expectations", "direction": "right"},
                  {"title": "Extensions", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:66%; left:55%", "label": "More to come", "direction": "left"}]'>
  </uimc-hotspots>