From ab1e6a94d12117f028d71f8a814852680fd0df7d Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Fri, 3 Jan 2025 18:32:34 +0100
Subject: [PATCH] feat: add tooltip to subscribe bell

---
 .../static/fellchensammlung/css/styles.css    | 55 ++++++++++---------
 .../details/detail_adoption_notice.html       | 17 ++++--
 2 files changed, 39 insertions(+), 33 deletions(-)

diff --git a/src/fellchensammlung/static/fellchensammlung/css/styles.css b/src/fellchensammlung/static/fellchensammlung/css/styles.css
index eb39d1d..98d04f6 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/styles.css
+++ b/src/fellchensammlung/static/fellchensammlung/css/styles.css
@@ -288,42 +288,43 @@ a.btn, a.btn2, a.nav-link {
 }
 
 .tooltip {
-  position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black;
+    position: relative;
+    display: inline-block;
 }
 
 .tooltip .tooltiptext {
-  visibility: hidden;
-  width: 200px;
-  background-color: var(--primary-dark-one);
-  color: var(--secondary-light-one);
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px 0;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  margin-left: -100px;
-  opacity: 0;
-  transition: opacity 0.3s;
+    font-size: 1rem;
+    font-weight: normal;
+    visibility: hidden;
+    width: 200px;
+    background-color: var(--primary-dark-one);
+    color: var(--secondary-light-one);
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px 0;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -100px;
+    opacity: 0;
+    transition: opacity 0.3s;
 }
 
 .tooltip .tooltiptext::after {
-  content: "";
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  margin-left: -5px;
-  border-width: 5px;
-  border-style: solid;
-  border-color: var(--primary-dark-one) transparent transparent transparent;
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--primary-dark-one) transparent transparent transparent;
 }
 
 .tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
+    visibility: visible;
+    opacity: 1;
 }
 
 /*********************/
diff --git a/src/fellchensammlung/templates/fellchensammlung/details/detail_adoption_notice.html b/src/fellchensammlung/templates/fellchensammlung/details/detail_adoption_notice.html
index 11578b3..d1fe6c9 100644
--- a/src/fellchensammlung/templates/fellchensammlung/details/detail_adoption_notice.html
+++ b/src/fellchensammlung/templates/fellchensammlung/details/detail_adoption_notice.html
@@ -8,12 +8,17 @@
     <div class="detail-adoption-notice-header">
         <h1 class="detail-adoption-notice-header">{{ adoption_notice.name }}
             {% if not is_subscribed %}
-                <form class="notification-card-mark-read" method="post">
-                    {% csrf_token %}
-                    <input type="hidden" name="action" value="subscribe">
-                    <input type="hidden" name="adoption_notice_id" value="{{ adoption_notice.pk }}">
-                    <button class="btn2" type="submit" id="submit"><i class="fa-solid fa-bell"></i></button>
-                </form>
+                <div class="tooltip">
+                    <form class="notification-card-mark-read" method="post">
+                        {% csrf_token %}
+                        <input type="hidden" name="action" value="subscribe">
+                        <input type="hidden" name="adoption_notice_id" value="{{ adoption_notice.pk }}">
+                        <button class="btn2" type="submit" id="submit"><i class="fa-solid fa-bell"></i></button>
+                    </form>
+                    <span class="tooltiptext">
+                        {% translate 'Abonniere diese Vermittlung um bei Kommentaren oder Statusänderungen benachrichtigt zu werden' %}
+                    </span>
+                </div>
             {% else %}
                 <form class="notification-card-mark-read" method="post">
                     {% csrf_token %}