From ebd34d06e2b773da3d87eb2fcb91a450765cddba Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 9 Sep 2019 14:57:46 +0200
Subject: [PATCH] done #2934 @0:40

---
 package.json                                  |  5 ++++-
 resources/js/product-details.js               | 20 +++++++++++++++++++
 resources/styles/components/tippy.styl        | 19 ++++++++++++++++++
 .../views/pages/product-detail.blade.php      |  6 +++++-
 webpack.mix.js                                |  5 +++--
 5 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/product-details.js
 create mode 100644 resources/styles/components/tippy.styl

diff --git a/package.json b/package.json
index 91b8908..d5383c7 100644
--- a/package.json
+++ b/package.json
@@ -32,10 +32,13 @@
         "stylus": "github:acidjazz/stylus#dev",
         "stylus-loader": "^3.0.2",
         "tailwindcss": "^1.0.4",
+        "tippy.js": "^4.3.5",
         "vue": "^2.6.10",
         "vue-slide-up-down": "^1.7.2",
         "vue-slider-component": "^3.0.40",
         "vue-template-compiler": "^2.6.10"
     },
-    "dependencies": {}
+    "dependencies": {
+
+    }
 }
diff --git a/resources/js/product-details.js b/resources/js/product-details.js
new file mode 100644
index 0000000..76f5aa5
--- /dev/null
+++ b/resources/js/product-details.js
@@ -0,0 +1,20 @@
+import tippy from 'tippy.js'
+
+tippy('[data-tooltip]', {
+    arrow: true,
+    arrowType: 'sharp',
+    animation: 'shift-away',
+    content: function (el) {
+        return el.getAttribute('data-tooltip');
+    },
+    flipBehavior: ["top", "bottom"],
+    theme: 'custom',
+    placement: 'top',
+
+    popperOptions: {
+        modifiers: {
+            data: {styles: {marginBottom: '50px'}},
+            hide: {enabled: true}
+        }
+    },
+});
diff --git a/resources/styles/components/tippy.styl b/resources/styles/components/tippy.styl
new file mode 100644
index 0000000..83fa068
--- /dev/null
+++ b/resources/styles/components/tippy.styl
@@ -0,0 +1,19 @@
+.tippy-tooltip
+  max-width: 380px !important
+  text-align: left;
+
+.tippy-tooltip.custom-theme
+  background-color: #6B7287;
+  color: white;
+  padding: 1.1rem
+  font-size: .9em;
+  line-height 1.7em
+
+.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;
+
+.tippy-popper
+  margin: 0 1rem
diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php
index 605c2ab..249e219 100644
--- a/resources/views/pages/product-detail.blade.php
+++ b/resources/views/pages/product-detail.blade.php
@@ -4,6 +4,10 @@
 
 @extends('layouts/app')
 
+@push('scripts')
+    <script src="{{ mix('/js/product-details.js') }}"></script>
+@endpush
+
 @section('content')
 
     <content class="pt-1v">
@@ -48,7 +52,7 @@
                         </template>
                     </cart-add>
 
-                    <span
+                    <span data-tooltip="{{__('Ajoutez un ou plusieurs produits à votre sélection, ajustez les quantités et obtenez un devis.')}}"
                         class="font-display text-lg inline-block align-middle rounded-full border-grey-dark border-2 h-8 w-8 text-center ml-6">?</span>
                 @endif
 
diff --git a/webpack.mix.js b/webpack.mix.js
index 3f9b808..1dbfd4f 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -25,8 +25,9 @@ mix.browserSync({
 });
 
 mix.js('resources/js/app.js', 'public/js')
-    .js('resources/js/vendor/**/**/app.js','public/js/vendor.js')
-    .js('resources/js/home.js','public/js')
+    .js('resources/js/vendor/**/**/app.js', 'public/js/vendor.js')
+    .js('resources/js/home.js', 'public/js')
+    .js('resources/js/product-details.js','public/js')
     .stylus('resources/styles/app.styl', 'public/css', {
         use: [
             require('rupture')()
-- 
2.39.5