Tippy v5

docs/welcome/css/welcome.css

@@ -112,60 +112,14 @@ pre {
   color: rgba(0, 0, 0, 0.75);
 }
 
-.tippy-popper.shepherd-popper .tippy-arrow {
-  border: 16px solid transparent;
-  content: '';
-  display: block;
-  height: 0;
-  position: absolute;
-  width: 0;
-}
-
-.tippy-popper.shepherd-popper[x-placement^='top'] {
-  margin-bottom: 16px;
-}
-
-.tippy-popper.shepherd-popper[x-placement^='top'] .tippy-arrow {
-  border-bottom: 0;
-  border-top-color: #ffffff;
-  left: calc(50% - 16px);
-}
-
-.tippy-popper.shepherd-popper[x-placement^='bottom'] {
-  margin-top: 16px;
-}
-
-.tippy-popper.shepherd-popper[x-placement^='bottom'] .tippy-arrow {
-  border-bottom-color: #ffffff;
-  border-top: 0;
-  left: calc(50% - 16px);
-}
-
-.tippy-popper.shepherd-popper[x-placement^='bottom'] .shepherd-has-title-theme .tippy-arrow {
-  border-bottom-color: #e6e6e6;
-}
-
 .tippy-popper.shepherd-popper[x-placement^='left'] {
   margin-right: 16px;
 }
 
-.tippy-popper.shepherd-popper[x-placement^='left'] .tippy-arrow {
-  border-left-color: #ffffff;
-  border-right: 0;
-  margin-top: -16px;
-  top: calc(50% - 16px);
-}
-
 .tippy-popper.shepherd-popper[x-placement^='right'] {
   margin-left: 16px;
 }
 
-.tippy-popper.shepherd-popper[x-placement^='right'] .tippy-arrow {
-  border-left: 0;
-  border-right-color: #ffffff;
-  top: calc(50% - 16px);
-}
-
 .tippy-popper.shepherd-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content header,
 .tippy-popper.shepherd-popper .shepherd-element:not(.shepherd-has-title) .shepherd-content .shepherd-header {
   background: transparent;

package.json

@@ -50,7 +50,7 @@
     "body-scroll-lock": "^2.6.3",
     "element-matches": "^0.1.2",
     "smoothscroll-polyfill": "^0.4.4",
-    "tippy.js": "^4.3.4"
+    "tippy.js": "^5.0.0-alpha.2"
   },
   "devDependencies": {
     "@babel/core": "^7.4.5",
@@ -94,6 +94,7 @@
     "rollup-plugin-license": "^0.9.0",
     "rollup-plugin-multi-entry": "^2.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-replace": "^2.2.0",
     "rollup-plugin-sass": "^1.2.2",
     "rollup-plugin-stylelint": "^0.0.4",
     "rollup-plugin-terser": "^5.0.0",

rollup.config.js

@@ -9,6 +9,7 @@ import fs from 'fs';
 import license from 'rollup-plugin-license';
 import postcss from 'postcss';
 import filesize from 'rollup-plugin-filesize';
+import replace from 'rollup-plugin-replace';
 import resolve from 'rollup-plugin-node-resolve';
 import sass from 'rollup-plugin-sass';
 import stylelint from 'rollup-plugin-stylelint';
@@ -18,6 +19,8 @@ import visualizer from 'rollup-plugin-visualizer';
 const pkg = require('./package.json');
 const banner = ['/*!', pkg.name, pkg.version, '*/\n'].join(' ');
 
+const env = process.env.DEVELOPMENT ? 'development' : 'production';
+
 const sassOptions = {
   output(styles, styleNodes) {
     fs.mkdirSync('dist/css', { recursive: true }, (err) => {
@@ -55,38 +58,45 @@ const plugins = [
   babel({
     exclude: 'node_modules/**'
   }),
+  replace({
+    'process.env.NODE_ENV': JSON.stringify(env)
+  }),
   css({ output: false })
 ];
 
 if (!process.env.DEVELOPMENT) {
-  plugins.push(sass({
-    output: false
-  }));
+  plugins.push(
+    sass({
+      output: false
+    })
+  );
 }
 
 // If we are running with --environment DEVELOPMENT, serve via browsersync for local development
 if (process.env.DEVELOPMENT) {
   plugins.push(sass(sassOptions));
 
-  plugins.push(browsersync({
-    host: 'localhost',
-    watch: true,
-    port: 3000,
-    notify: false,
-    open: true,
-    server: {
-      baseDir: 'docs/welcome',
-      routes: {
-        '/shepherd/dist/css/shepherd-theme-default.css': 'dist/css/shepherd-theme-default.css',
-        '/shepherd/dist/js/shepherd.js': 'dist/js/shepherd.js',
-        '/shepherd/docs/welcome/js/prism.js': 'docs/welcome/js/prism.js',
-        '/shepherd/docs/welcome/js/welcome.js': 'docs/welcome/js/welcome.js',
-        '/shepherd/docs/welcome/css/prism.css': 'docs/welcome/css/prism.css',
-        '/shepherd/docs/welcome/css/welcome.css': 'docs/welcome/css/welcome.css',
-        '/shepherd/docs/welcome/sheep.svg': 'docs/welcome/sheep.svg'
+  plugins.push(
+    browsersync({
+      host: 'localhost',
+      watch: true,
+      port: 3000,
+      notify: false,
+      open: true,
+      server: {
+        baseDir: 'docs/welcome',
+        routes: {
+          '/shepherd/dist/css/shepherd-theme-default.css': 'dist/css/shepherd-theme-default.css',
+          '/shepherd/dist/js/shepherd.js': 'dist/js/shepherd.js',
+          '/shepherd/docs/welcome/js/prism.js': 'docs/welcome/js/prism.js',
+          '/shepherd/docs/welcome/js/welcome.js': 'docs/welcome/js/welcome.js',
+          '/shepherd/docs/welcome/css/prism.css': 'docs/welcome/css/prism.css',
+          '/shepherd/docs/welcome/css/welcome.css': 'docs/welcome/css/welcome.css',
+          '/shepherd/docs/welcome/sheep.svg': 'docs/welcome/sheep.svg'
+        }
       }
-    }
-  }));
+    })
+  );
 }
 
 plugins.push(license({ banner }));
@@ -141,6 +151,9 @@ if (!process.env.DEVELOPMENT) {
         }),
         sass(sassOptions),
         css({ output: false }),
+        replace({
+          'process.env.NODE_ENV': JSON.stringify(env)
+        }),
         terser(),
         license({
           banner

src/js/tour.js

@@ -361,7 +361,7 @@ export class Tour extends Evented {
    * @private
    */
   _setTooltipDefaults() {
-    tippy.setDefaults(tooltipDefaults);
+    tippy.setDefaultProps(tooltipDefaults);
   }
 
   /**

src/scss/_variables.scss

@@ -25,4 +25,4 @@ $use-drop-shadow: true !default;
 
 // Popper options
 $arrow-pointer-events: none !default;
-$arrow-size: 16px !default;
+$arrow-size: 2.1 !default;

src/scss/tippy/_base-tooltips.scss

@@ -12,21 +12,25 @@
  * </div>
  */
 
-.shepherd-popper .tippy-arrow {
-  transform: scale(1.5);
-}
-
 .tippy-popper.shepherd-popper {
   @include popper-theme-arrows($arrow-size: $arrow-size, $arrow-pointer-events: $arrow-pointer-events);
 
   z-index: $shepherd-element-z-index;
 
-  & .tippy-tooltip {
-    background-color: rgba(0, 0, 0, 0);
-    max-height: $shepherd-element-max-height;
-    max-width: $shepherd-element-max-width;
-    padding: 0;
-    width: $shepherd-element-width;
+  .tippy-tooltip {
+    background-color: $shepherd-text-background;
+
+    .tippy-arrow {
+      transform: scale($arrow-size);
+      z-index: $shepherd-element-z-index + 1;
+    }
+
+    .tippy-content {
+      max-height: $shepherd-element-max-height;
+      max-width: $shepherd-element-max-width;
+      padding: 0;
+      text-align: center;
+      width: $shepherd-element-width;
+    }
   }
 }
-

src/scss/tippy/_popper-theme-arrows.scss

@@ -1,55 +1,59 @@
-@mixin popper-theme-arrows($arrow-size: 16px, $arrow-pointer-events: null, $text-bg: $shepherd-text-background, $header-bg: $shepherd-header-background) {
-  .tippy-arrow {
-    border: $arrow-size solid transparent;
-    content: '';
-    display: block;
-    height: 0;
-    pointer-events: $arrow-pointer-events;
-    position: absolute;
-    width: 0;
-  }
-
-  // Centers and middles
+@mixin popper-theme-arrows($arrow-size: 2.1, $arrow-pointer-events: null, $text-bg: $shepherd-text-background, $header-bg: $shepherd-header-background) {
+  $margin: calc((#{$arrow-size} / 2.1) * 16px);
 
   &[x-placement^='top'] {
-    margin-bottom: $arrow-size;
+    margin-bottom: $margin;
 
     .tippy-arrow {
-      border-bottom: 0;
       border-top-color: $text-bg;
-      left: calc(50% - #{$arrow-size});
+    }
+
+    .shepherd-has-title-theme {
+      .tippy-arrow {
+        border-top-color: $header-bg;
+      }
     }
   }
 
   &[x-placement^='bottom'] {
-    margin-top: $arrow-size;
+    margin-top: $margin;
 
     .tippy-arrow {
-      border-bottom-color: $header-bg;
-      border-top: 0;
-      left: calc(50% - #{$arrow-size});
+      border-bottom-color: $text-bg;
+    }
+
+    .shepherd-has-title-theme {
+      .tippy-arrow {
+        border-bottom-color: $header-bg;
+      }
     }
   }
 
   &[x-placement^='left'] {
-    margin-right: $arrow-size;
+    margin-right: $margin;
 
     .tippy-arrow {
       border-left-color: $text-bg;
-      border-right: 0;
-      margin-top: -$arrow-size;
-      top: calc(50% - #{$arrow-size});
+    }
+
+    .shepherd-has-title-theme {
+      .tippy-arrow {
+        border-left-color: $header-bg;
+      }
     }
   }
 
   &[x-placement^='right'] {
-    margin-left: $arrow-size;
+    margin-left: $margin;
 
     .tippy-arrow {
-      border-left: 0;
       border-right-color: $text-bg;
-      top: calc(50% - #{$arrow-size});
+    }
+
+    .shepherd-has-title-theme {
+      .tippy-arrow {
+        border-right-color: $header-bg;
+      }
     }
   }
 }
-

test/cypress/integration/a11y.spec.js

@@ -6,7 +6,7 @@ describe('a11y', () => {
 
   beforeEach(() => {
     Shepherd = null;
-    tippy.setDefaults({ duration: 0, delay: 0 });
+    tippy.setDefaultProps({ duration: 0, delay: 0 });
 
     cy.visit('/test/dummy/', {
       onLoad(contentWindow) {

test/cypress/integration/element-targeting.spec.js

@@ -6,7 +6,7 @@ describe('Attaching tooltips to target elements in the DOM on each step', () =>
 
   beforeEach(() => {
     Shepherd = null;
-    tippy.setDefaults({ duration: 0, delay: 0 });
+    tippy.setDefaultProps({ duration: 0, delay: 0 });
 
     cy.visit('/test/dummy/', {
       onLoad(contentWindow) {

test/cypress/integration/modal.spec.js

@@ -12,7 +12,7 @@ describe('Modal mode', () => {
 
   beforeEach(() => {
     Shepherd = null;
-    tippy.setDefaults({ duration: 0, delay: 0 });
+    tippy.setDefaultProps({ duration: 0, delay: 0 });
 
     cy.visit('/test/dummy/', {
       onLoad(contentWindow) {

test/cypress/integration/test.acceptance.js

@@ -7,7 +7,7 @@ let Shepherd;
 describe('Shepherd Acceptance Tests', () => {
   beforeEach(() => {
     Shepherd = null;
-    tippy.setDefaults({ duration: 0, delay: 0 });
+    tippy.setDefaultProps({ duration: 0, delay: 0 });
 
     cy.visit('/test/dummy/', {
       onLoad(contentWindow) {

test/unit/step.spec.js

@@ -85,7 +85,7 @@ describe('Tour | Step', () => {
     });
 
     beforeEach(() => {
-      tippy.setDefaults({ duration: 0, delay: 0 });
+      tippy.setDefaultProps({ duration: 0, delay: 0 });
     });
 
     afterEach(() => {

test/unit/tour.spec.js

@@ -21,7 +21,7 @@ describe('Tour | Top-Level Class', function() {
   };
 
   beforeEach(() => {
-    tippy.setDefaults({ duration: 0, delay: 0 });
+    tippy.setDefaultProps({ duration: 0, delay: 0 });
   });
 
   afterEach(() => {
@@ -56,7 +56,7 @@ describe('Tour | Top-Level Class', function() {
 
     it('sets defaults for tippy', function() {
       const tourSpy = spy(Shepherd.Tour.prototype, '_setTooltipDefaults');
-      const tippySpy = spy(tippy, 'setDefaults');
+      const tippySpy = spy(tippy, 'setDefaultProps');
 
       expect(tourSpy.callCount).toBe(0);
       expect(tippySpy.callCount).toBe(0);