new hints display

javascript/black-orange.css

@@ -1,7 +1,7 @@
 /* generic html tags */
 :root { --font: system-ui, "Segoe UI", "Roboto", "sans-serif"; }
 html { font-size: 16px; }
-body, button, input, select, textarea { font-family: var(--font); overflow-x: hidden; }
+body, button, input, select, textarea { font-family: var(--font);}
 button { font-size: 1.2rem; }
 img { background-color: black; }
 input[type=range] { height: 18px; appearance: none; margin-top: 0; min-width: 160px; background-color: black; width: 100%; background: transparent; }

javascript/set-hints.js

@@ -2,9 +2,33 @@ let locale = {
   data: [],
   timeout: null,
   finished: false,
+  type: 2,
+  el: null,
 }
 
-async function setLocale() {
+function tooltipCreate() {
+  locale.el = document.createElement('div');
+  locale.el.className = 'tooltip';
+  locale.el.id = 'tooltip-container';
+  locale.el.innerText = 'this is a hint'
+  gradioApp().appendChild(locale.el);
+  if (window.opts.tooltips === 'None') locale.type = 0;
+  if (window.opts.tooltips === 'Browser default') locale.type = 1;
+  if (window.opts.tooltips === 'UI tooltips') locale.type = 2;
+}
+
+async function tooltipShow(e) {
+  if (e.target.dataset.hint) {
+    locale.el.classList.add('tooltip-show');
+    locale.el.innerHTML = `<b>${e.target.textContent}</b><br>${e.target.dataset.hint}`;
+  }
+}
+
+async function tooltipHide(e) {
+  locale.el.classList.remove('tooltip-show');
+}
+
+async function setHints() {
   if (locale.finished) return;
   if (locale.data.length === 0) {
     const res = await fetch('/file=html/locale_en.json');
@@ -16,6 +40,8 @@ async function setLocale() {
     ...Array.from(gradioApp().querySelectorAll('label > span')),
   ];
   if (elements.length === 0) return;
+  if (Object.keys(opts).length === 0) return;
+  if (!locale.el) tooltipCreate();
   let localized = 0;
   let hints = 0;
   for (el of elements) {
@@ -26,14 +52,22 @@ async function setLocale() {
     }
     if (found?.hint?.length > 0) {
       hints++;
-      el.title = found.hint;
+      if (locale.type === 1) {
+        el.title = found.hint;
+      } else if (locale.type === 2) {
+        el.dataset.hint = found.hint;
+        el.addEventListener('mouseover', tooltipShow);
+        el.addEventListener('mouseout', tooltipHide);
+      } else {
+        // tooltips disabled
+      }
     }
   }
-  console.log('setLocale', { elements: elements.length, localized, hints, data: locale.data });
+  console.log('set-hints', { type: locale.type, elements: elements.length, localized, hints, data: locale.data });
   locale.finished = true;
 }
 
 onAfterUiUpdate(async () => {
   if (locale.timeout) clearTimeout(locale.timeout);
-  locale.timeout = setTimeout(setLocale, 250)
+  locale.timeout = setTimeout(setHints, 250)
 });

javascript/style.css

@@ -199,6 +199,26 @@ div#extras_scale_to_tab div.form{
     overflow-wrap: break-word;
 }
 
+.tooltip {
+  display: block;
+  position: fixed;
+  top: 1em;
+  right: 1em;
+  padding: 0.5em;
+  background: var(--input-background-fill);
+  color: var(--body-text-color);
+  border: 1pt solid var(--button-primary-border-color);
+  width: 22em;
+  min-height: 1.3em;
+  font-size: 0.8em;
+  transition: opacity 0.2s ease-in;
+  opacity: 0;
+}
+
+.tooltip-show {
+  opacity: 1;
+}
+
 /* settings */
 #quicksettings {
     width: fit-content;
@@ -228,16 +248,16 @@ div#extras_scale_to_tab div.form{
     flex: 100000 0 75%;
 }
 
-#settings > div.tab-content > div{
+#settings > div.tab-content > div {
     border: none;
     padding: 0;
 }
 
-#settings > div.tab-nav{
+#settings > div.tab-nav {
     display: grid;
     grid-template-columns: repeat(auto-fill, .3em minmax(10em, 1fr));
     flex: 1 0 auto;
-    width: 11em;
+    width: 12em;
     align-self: flex-start;
     gap: var(--spacing-md);
 }