From e50992578914872d37c08004e2fef3698434915c Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Wed, 10 Feb 2021 09:45:55 +0100
Subject: [PATCH] Use question mark with tooltip directive

Needs some css customization due to the use of a button element (instead of a basic span)
---
 .../shop_variant_with_unit_price.html.haml      |  5 ++++-
 .../darkswarm/question-mark-icon.scss           | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml b/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml
index 4d261d73ed..3250f032c0 100644
--- a/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml
+++ b/app/assets/javascripts/templates/shop_variant_with_unit_price.html.haml
@@ -9,7 +9,10 @@
       "price-breakdown-animation" => true}
     {{ variant.price_with_fees | localizeCurrency }}
     .variant-unit-price
-      %span.question-mark-icon
+      %question-mark-with-tooltip{"question-mark-with-tooltip" => "_",
+      "question-mark-with-tooltip-append-to-body" => "true",
+      "question-mark-with-tooltip-placement" => "top",
+      "question-mark-with-tooltip-animation" => true}
       {{ variant.unit_price_price | localizeCurrency }} / {{ variant.unit_price_unit }}
         
   .medium-2.large-2.columns.total-price
diff --git a/app/assets/stylesheets/darkswarm/question-mark-icon.scss b/app/assets/stylesheets/darkswarm/question-mark-icon.scss
index 5a04ebbb3f..25a4e59ca3 100644
--- a/app/assets/stylesheets/darkswarm/question-mark-icon.scss
+++ b/app/assets/stylesheets/darkswarm/question-mark-icon.scss
@@ -1,6 +1,19 @@
 .question-mark-icon {
   position: relative;
   top: 1px;
+
+  // Reset button element css attributes
+  padding: 0;
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  background-color: transparent;
+
+  &:hover,
+  &:focus {
+    background-color: transparent;
+  }
+
   &::before {
     content: "?";
     padding-left: 1px;
@@ -10,8 +23,8 @@
     border-radius: 50%;
     text-align: center;
     background-color: $grey-075;
-    width: 18px;
-    height: 18px;
+    width: 20px;
+    height: 20px;
     font-weight: bold;
     font-size: 1rem;
   }