wip #2934 @1.40

diff --git a/public/_modules/product-detail-page/index.html b/public/_modules/product-detail-page/index.html
index aa7274ad276b2a53733c9aedae3dc7e05e3dcfec..5a9157a02d2d1e1fc99b72918eeb30fcf5a86df7 100644 (file)
--- a/public/_modules/product-detail-page/index.html
+++ b/public/_modules/product-detail-page/index.html
@@ -157,22 +157,13 @@
                         </div>
 
 
-                        <!-- TODO Add tippy JS-->
-
-                        <!--<button data-tippy-content="Tooltip">Text</button>-->
-                        <!--<button data-tippy-content="Another Tooltip">Text</button>-->
-
-
-                        <div id="popup" class="hidden">
-                            Ajoutez un ou plusieurs produits à votre sélection,
-                            ajustez les quantités et obtenez un devis.
-                        </div>
-
                         <div class="flex">
                         <p class="mt-4"><a href="/storage/116/Datasheet_K3D120_pmi_EN.pdf">
                             Télécharger la fiche produit
                         </a></p>
-                        <div class="ml-4 question-tooltip">
+
+                        <div data-tooltip-content="Ajoutez un ou plusieurs produits à votre sélection,
+ajustez les quantités et obtenez un devis." class="ml-4 question-tooltip">
                             <div class="questionmark">
                                 ?
                             </div>

diff --git a/public/_modules/product-detail-page/main.js b/public/_modules/product-detail-page/main.js
index da7f2183989af48fa5ea9a50ed64e7427a7dff3d..27bf957de2baaa7a3cb02f25bd7e49a5cc979cdb 100644 (file)
--- a/public/_modules/product-detail-page/main.js
+++ b/public/_modules/product-detail-page/main.js
@@ -1,9 +1,11 @@
 // jshint ignore: start
 
-var ref = $('.question-tooltip');
-var popup = $('#popup');
-// popup.hide();
-// ref.on('click',function(){
-//     popup.show();
-// });
-
+tippy('.question-tooltip', {
+    arrow: true,
+    arrowType: 'sharp', // or 'sharp' (default)
+    animation: 'shift-away',
+    content: $('.question-tooltip').data('tooltip-content'),
+    flipBehavior: ["top", "bottom"],
+    theme: 'custom',
+    placement: 'top',
+});

diff --git a/public/_modules/product-detail-page/style.styl b/public/_modules/product-detail-page/style.styl
index 5661370f3bd342e42880c1e083b7883b6389b5eb..978e04e560712a69c81ca5003a9e92dbe50ca292 100644 (file)
--- a/public/_modules/product-detail-page/style.styl
+++ b/public/_modules/product-detail-page/style.styl
@@ -12,27 +12,15 @@
   font-weight: 600
   cursor: pointer
 
-//.tooltip
-//  margin-top: 55px;
-//  position relative
-//  &-arrow
-//    width 20px
-//    height 20px
-//    background #6B7287
-//    position absolute
-//    bottom -5px
-//    transform rotate(45deg)
-//  &-inner
-//      background #6B7287
-//      padding 1.5rem
-//      border-radius 3px
-//      color white
-      //margin-top: -35px
-      //position: relative
-      //top: 5px
-#popup
-  background #6B7287
-  padding 1.5rem
-  color: white
-  border-radius 3px
-  max-width: 388px
\ No newline at end of file
+.tippy-tooltip
+  max-width 380px!important
+.tippy-tooltip.custom-theme
+  background-color: #6B7287;
+  color: white;
+  padding: 1.5rem
+
+.tippy-tooltip.custom-theme[x-placement^='top'] .tippy-arrow
+  border-top-color: #6B7287;
+
+.tippy-tooltip.custom-theme[x-placement^='bottom'] .tippy-arrow
+  border-bottom-color: #6B7287;