UI MarCom

Hotspots Stable

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/version/3.1/assets/img/brandville/SHS_MR_45010_18.jpg"
    items='[{"title": "Feature 1", "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": "Feature 2", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:22%; left:45%"}, 
            {"title": "Feature 3", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:33%; left:66%"}, 
            {"title": "Feature 4", "text":"Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magn", "position":"top:66%; left:33%"}]'>
  </uimc-hotspots>