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.

Usage Code

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

Attribute	Description	Values	Default
image-source	Sets the source for background-image	valid URL	–
items	Sets the content of the items	JSON formatted Array	–

Callback	Argument	Description
onOpen	item	Pass a callback function that gets triggered when a hotspot is opened
onClose	item	Pass 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>