feat: Add tooltip explaining the meaning of the checkmark

src/fellchensammlung/static/fellchensammlung/css/styles.css

@@ -222,7 +222,7 @@ a.btn, a.btn2, a.nav-link {
     position: relative;
     left: 0.2rem;
     bottom: 0.075rem;
-    background-color: var(--primary-dark-one);
+    background-color: var(--primary-light-one);
     color: var(--secondary-light-one);
     border-radius: 0.5rem;
     width: 1.5rem;
@@ -287,6 +287,45 @@ a.btn, a.btn2, a.nav-link {
     top: 2px;
 }
 
+.tooltip {
+  position: relative;
+  display: inline-block;
+  border-bottom: 1px dotted black;
+}
+
+.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;
+}
+
+.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;
+}
+
+.tooltip:hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+
 /*********************/
 /* UNIQUE COMPONENTS */
 /*********************/

src/fellchensammlung/templates/fellchensammlung/details/detail_adoption_notice.html

@@ -54,7 +54,12 @@
                         <div>
                             <a href="{{ adoption_notice.organization.get_absolute_url }}">{{ adoption_notice.organization }}</a>
                             {% if adoption_notice.organization.trusted %}
+                                <div class="tooltip">
                                 <div class="checkmark"><i class="fa-solid fa-check"></i></div>
+                                <span class="tooltiptext">
+                                    {% translate 'Diese Organisation kennt sich mit Ratten aus und achtet auf gute Abgabebedingungen' %}
+                                </span>
+
                             {% endif %}
                             </div>
                     </td>