Added tests for Layout and Treeview

src/myfasthtml/assets/myfasthtml.css

@@ -13,6 +13,7 @@
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
     --properties-font-size: var(--text-xs);
+    --mf-tooltip-zindex: 10;
 }
 
 
@@ -58,6 +59,26 @@
  * Compatible with DaisyUI 5
  */
 
+.mf-tooltip-container {
+    background: var(--color-base-200);
+    padding: 5px 10px;
+    border-radius: 4px;
+    pointer-events: none; /* Prevent interfering with mouse events */
+    font-size: 12px;
+    white-space: nowrap;
+    opacity: 0; /* Default to invisible */
+    visibility: hidden; /* Prevent interaction when invisible */
+    transition: opacity 0.3s ease, visibility 0s linear 0.3s; /* Delay visibility removal */
+    position: fixed; /* Keep it above other content and adjust position */
+    z-index: var(--mf-tooltip-zindex); /* Ensure it's on top */
+}
+
+.mf-tooltip-container[data-visible="true"] {
+    opacity: 1;
+    visibility: visible; /* Show tooltip */
+    transition: opacity 0.3s ease; /* No delay when becoming visible */
+}
+
 /* Main layout container using CSS Grid */
 .mf-layout {
     display: grid;
@@ -634,7 +655,6 @@
 /* *************** Panel Component *************** */
 /* *********************************************** */
 
-/* Container principal du panel */
 .mf-panel {
     display: flex;
     width: 100%;
@@ -643,7 +663,6 @@
     position: relative;
 }
 
-/* Panel gauche */
 .mf-panel-left {
     position: relative;
     flex-shrink: 0;
@@ -655,15 +674,13 @@
     border-right: 1px solid var(--color-border-primary);
 }
 
-/* Panel principal (centre) */
 .mf-panel-main {
     flex: 1;
     height: 100%;
     overflow: auto;
-    min-width: 0; /* Important pour permettre le shrink du flexbox */
+    min-width: 0; /* Important to allow the shrinking of flexbox */
 }
 
-/* Panel droit */
 .mf-panel-right {
     position: relative;
     flex-shrink: 0;