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>| 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.2/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/version/3.2/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>