done #2934 @0:40

diff --git a/package.json b/package.json
index 91b8908e286d821a8bbb448bdeff58bfc7d44607..d5383c78a3fc7feacc7237e6e13c39891940ff25 100644 (file)
--- 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 (file)
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 (file)
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 605c2ab8a660284a5945db55883b37c48ebc3536..249e219d805773121a05361f7d4d59713a2d6dd4 100644 (file)
--- 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 3f9b8088d32e26ae7e5a93443c44e759dbc61b73..1dbfd4fbb8b0e9a03e6142e66347fcd2abdbed0f 100644 (file)
--- 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')()