From 1cd0096ccfbfed7ae305296088f13a8018323f5c Mon Sep 17 00:00:00 2001
From: a0eoc <42794343+a0eoc@users.noreply.github.com>
Date: Wed, 13 Sep 2023 23:20:06 +0500
Subject: [PATCH] feat(ui): add nojs tooltip to "Get Stylus" button

To avoid user confustion if Stylus is installed.
---
 web/typescript/page/view-style.ts | 6 ++++++
 web/views/style/view.tmpl         | 1 +
 2 files changed, 7 insertions(+)

diff --git a/web/typescript/page/view-style.ts b/web/typescript/page/view-style.ts
index 408bca3f..27912087 100644
--- 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
index eb970627..1087b33b 100644
--- 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>