Added popup example.

css/popup.css

@@ -0,0 +1,35 @@
+.popup {
+    width: 800px;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    min-width: 400px;
+    color: #191919;
+    background-color: #f2f2f2;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    padding: 25.64px 40px;
+  }
+  
+  .popup img {
+    display: block;
+    margin: auto;
+  }
+  
+  .popup img:not(:first-child) {
+    margin-top: 20px;
+  }
+  
+  .popup img:not(:last-child) {
+    margin-bottom: 20px;
+  }
+  
+  .popup .notch {
+    width: 20px;
+    height: 20px;
+    border-color: #f2f2f2;
+  }
+  
+  .PopupContent p:not(:last-child) {
+    margin-bottom: 30px;
+  }

lib/card/index.html

@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="../3rdparty/highlight/styles/default.css">
     <link rel="stylesheet" href="../../css/doctest.css">
     <link rel="stylesheet" href="../../css/highlight.css">
+    <link rel="stylesheet" href="../../css/popup.css">
     <script src="../3rdparty/highlight/highlight.pack.js"></script>
     <script src="../../dist/iwmlib.js"></script>
     <script src="../../dist/iwmlib.3rdparty.js"></script>
@@ -59,6 +60,7 @@
 
         <article id="demoCardWithSelector"
             style="position: absolute; left: 50%; top: 0%; padding: 16px; margin: 16px; border: 1px solid gray; width: 320px; height: 240px;">
+            <div class="info-card">
                     <h1 style="color: gray;">A Demo Card with selectors</h1>
 
                     <!-- Grr... The viewBox must reflect the width & height, using 0, 0, 100,
@@ -69,7 +71,7 @@
                         </defs>
                         <image xlink:href="../examples/king.jpeg" x="0" y="0" height="188" width="268" />
                         <g>
-                    <circle cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
+                            <circle xlink:href="./popup.html"  cx="145" cy="60" r="50" class="highlight" stroke="white" fill="transparent"
                                 stroke-width="4" />
                         </g>
         
@@ -79,6 +81,8 @@
                             style="color:blue;">dolor</a> sit
                         amet,
                         consetetur sadipscing elitr.</p>
+            </div>
+            
         </article>
 
     </div>
@@ -93,7 +97,7 @@
         const wrapper2 = new CardWrapper(demoCardWithSelector)
         wrapper2.handleClicksAsTaps()
         wrapper2.onTap('.highlight', event => {
-            Highlight.toggleHighlight(event.target)
+            Card.loadHighlightPopup(event)
         })
         
         wrapper2.onTap('.link', event => {

lib/card/popup.html

@@ -0,0 +1,10 @@
+<div class="popupHtml">
+
+    <h1>
+        Popup
+    </h1>
+    <p>
+        Lorem ipsum...
+    </p>
+
+</div>