Add contextual WebGUI tooltips

webgui/assets/backupper.css

@@ -120,9 +120,49 @@
 #bu-toast.show { display: block; }
 #bu-toast.error { border-color: var(--bu-bad); color: var(--bu-bad); }
 
+#backupper-app [data-tooltip] { cursor: help; }
+#backupper-app button[data-tooltip],
+#backupper-app input[data-tooltip],
+#backupper-app select[data-tooltip],
+#backupper-app textarea[data-tooltip] { cursor: pointer; }
+#bu-tooltip {
+  background: #15191d;
+  border: 1px solid #59636d;
+  border-radius: 7px;
+  box-shadow: 0 8px 26px rgba(0,0,0,.35);
+  color: #ffffff;
+  display: none;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.45;
+  max-width: min(380px, calc(100vw - 28px));
+  padding: 10px 12px;
+  pointer-events: none;
+  position: fixed;
+  text-align: left;
+  white-space: normal;
+  z-index: 100000;
+}
+#bu-tooltip.visible { display: block; }
+#bu-tooltip::after {
+  border: 6px solid transparent;
+  border-top-color: #15191d;
+  bottom: -12px;
+  content: "";
+  left: var(--bu-tooltip-arrow, 24px);
+  position: absolute;
+}
+#bu-tooltip.below::after {
+  border-bottom-color: #15191d;
+  border-top-color: transparent;
+  bottom: auto;
+  top: -12px;
+}
+
 @media (max-width: 700px) {
   #backupper-app { padding-left: 8px; padding-right: 8px; }
   .bu-form { grid-template-columns: 1fr; }
   .bu-header { align-items: flex-start; flex-direction: column; gap: 12px; }
   .bu-table { display: block; overflow-x: auto; }
+  #bu-tooltip { font-size: 13px; }
 }