Nicer close-tooltip-window button.

It now stays in the top-right always.

The code is a bit cleaner too.

ete4/smartview/static/gui.css

@@ -191,14 +191,17 @@
     border-radius: 10px;
     box-shadow: 3px 3px 3px #DDD;
     background-color: white;
-    padding: 10px;
+    padding: 10px 25px 10px 10px;
     user-select: text;
 }
 
 .info_button {
-    padding: 3px 8px;
+    position: absolute;
+    top: 3px;
+    right: 5px;
+    padding: 1px 3px;
     border-style: hidden;
-    background-color: white;
+    background-color: #FFF0;
 }
 
 .info_button:hover {

ete4/smartview/static/js/draw.js

@@ -438,10 +438,8 @@ function create_item(item, tl, zoom, wmax) {
 
         // Save information in the box as a data attribute string (.dataset).
         if (name || Object.entries(props).length > 0) {
-            const close = '<button class="info_button" ' +
-                  `onclick="div_info.style.visibility='hidden'">×</button>`;
 
-            b.dataset.info = (name ? `<i>${name}</i> ` : "") + close + "<br>" +
+            b.dataset.info = (name ? `<i>${name}</i> ` : "") + "<br>" +
                 (Object.entries(props).map(([k, v]) => `<b>${k}:</b> ${v}`)
                  .join("<br>"));
             // This will be used for the "tooltip" in on_box_click().

ete4/smartview/static/js/gui.js

@@ -724,7 +724,9 @@ function on_box_click(event, box, node_id) {
     else {  // we simply clicked on this node (maybe show tooltip)
         const data = event.target.dataset;  // get from data attributes
         if (data.mousepos === `${event.pageX} ${event.pageY}`) {  // didn't move
-            div_info.innerHTML = `<p>${data.info}</p>`;
+            div_info.innerHTML = `<div>${data.info}</div>` +
+                '<button class="info_button"' +
+                `   onclick="div_info.style.visibility='hidden'">×</button>`;
             div_info.style.left = `${event.pageX}px`;
             div_info.style.top = `${event.pageY}px`;
             div_info.style.visibility = "visible";  // show "tooltip"