feat(ui): add nojs tooltip to "Get Stylus" button

To avoid user confustion if Stylus is installed.
userstyles-world · Sep 13, 2023 · 1cd0096 · 1cd0096
1 parent cd05202
commit 1cd0096
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/web/typescript/page/view-style.ts b/web/typescript/page/view-style.ts
@@ -3,6 +3,7 @@ import {doDomOperation} from 'utils/dom';
 export const initViewStyle = () => doDomOperation(() => {
     shareButton();
     checkIfStyleInstalled();
+    removeStylusTooltip();
 });
 
 function shareButton() {
@@ -47,3 +48,8 @@ function checkIfStyleInstalled() {
         origin: 'https://userstyles.world'
     }));
 }
+
+function removeStylusTooltip() {
+    const Stylus = document.querySelector('a#stylus');
+    Stylus.removeAttribute("data-tooltip");
+}
diff --git a/web/views/style/view.tmpl b/web/views/style/view.tmpl
@@ -133,6 +133,7 @@
 			target="_blank"
 			rel="noopener"
 			href="https://github.com/openstyles/stylus/#readme"
+			data-tooltip="Stylus detection only works with JS enabled"
 			id="stylus" class="btn icon stylus"
 		>{{ template "icons/brush" }} Get Stylus</a>
 	</div>