OFRAG Frontend Components Library v0.0.0

Image Tooltip Map: With Equipment Height Smaller Than 700 Px 

<div class="image ">
    <picture class="taggd">
        <img src="/example-assets/images/image-tooltip-map/equipment.jpg" class="image__img image-tooltip-map__img is-loading" alt="Tooltip Map" title="Tooltip Map" srcset="/example-assets/images/image-tooltip-map/equipment.jpg 1x, /example-assets/images/image-tooltip-map/equipment.jpg 2x" data-tooltip-info=[{&quot;top&quot;:30,&quot;left&quot;:62,&quot;data&quot;:[{&quot;name&quot;:&quot;Batterie&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]},{&quot;top&quot;:70,&quot;left&quot;:67,&quot;data&quot;:[{&quot;name&quot;:&quot;Tachometer&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]},{&quot;top&quot;:57,&quot;left&quot;:60,&quot;data&quot;:[{&quot;name&quot;:&quot;Motor&quot;,&quot;value&quot;:&quot;http://www.fuchs-movesa.ch&quot;}]}] onload="this.classList.remove('is-loading')" />
    </picture>
</div>
 
{% include '@SharedComponents/modules/shared/components/image-tooltip-map/image-tooltip-map.twig' %}
 
{
  "markerInfos": [
    {
      "top": 30,
      "left": 62,
      "data": [
        {
          "name": "Batterie",
          "value": "http://www.fuchs-movesa.ch"
        }
      ]
    },
    {
      "top": 70,
      "left": 67,
      "data": [
        {
          "name": "Tachometer",
          "value": "http://www.fuchs-movesa.ch"
        }
      ]
    },
    {
      "top": 57,
      "left": 60,
      "data": [
        {
          "name": "Motor",
          "value": "http://www.fuchs-movesa.ch"
        }
      ]
    }
  ],
  "image": {
    "src": "/example-assets/images/image-tooltip-map/equipment.jpg",
    "src2x": "/example-assets/images/image-tooltip-map/equipment.jpg",
    "alt": "Tooltip Map",
    "title": "Tooltip Map"
  }
}
  • Content: 
    import './image-tooltip-map.scss';
import ImageTooltipMap, {selector as sel} from 'cando-cx-components-library/components/modules/shared/components/image-tooltip-map/image-tooltip-map';

export default ImageTooltipMap;
export const selector = sel;
  • URL: /components/raw/image-tooltip-map/image-tooltip-map.js
  • Filesystem Path: src/components/modules/shared/components/image-tooltip-map/image-tooltip-map.js
  • Size: 247 Bytes
  • Content: 
    @import "~shared/base";
@import "~cando-cx-components-library/components/modules/shared/components/image-tooltip-map/image-tooltip-map";
  • URL: /components/raw/image-tooltip-map/image-tooltip-map.scss
  • Filesystem Path: src/components/modules/shared/components/image-tooltip-map/image-tooltip-map.scss
  • Size: 136 Bytes

No notes defined.