Add x-placement to tooltip node (#450)

* Add x-placement to tooltip node * Set attribute in onCreate too * Extract to applyMutations helper * Add comment explaining * Explaining comments * called -> invoked consistency * Return type
atomiks · Mar 13, 2019 · af8d317 · af8d317
1 parent 64abda0
commit af8d317
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 181 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -21,24 +21,16 @@
         background: #eee;
         border: 1px solid #ddd;
         font-size: 16px;
-        margin: 8px;
+        margin: 20px;
         padding: 8px;
       }
     </style>
   </head>
 
   <body>
-    <div class="container">
-      <button data-tippy="Auto">Auto</button>
-
-      <h2>Group</h2>
-      <button class="group">Group</button>
-      <button class="group">Group</button>
-      <button class="group">Group</button>
-      <button class="group">Group</button>
-
-      <h2>Event delegation</h2>
-      <button class="delegation" data-tippy-content="Event delegation"></button>
-    </div>
+    <div class="container"></div>
+    <!-- prettier-ignore -->
+    <script> </script>
+    <!-- Empty script tag fixes Chrome transition bug on page loads. -->
   </body>
 </html>
diff --git a/demo/index.js b/demo/index.js
@@ -1,13 +1,37 @@
 import tippy from '../src/index'
 import '../src/scss/index.scss'
+import '../src/scss/themes/light.scss'
 import '../src/scss/themes/light-border.scss'
+import '../src/scss/themes/google.scss'
+import '../src/scss/themes/translucent.scss'
 
-tippy.group(tippy('.group', { content: 'Tooltip' }), {
-  delay: 1000,
-  duration: tippy.defaults.duration,
-})
+const container = document.querySelector('.container')
+
+const themes = ['dark', 'light', 'light-border', 'google', 'translucent']
+const placements = ['top', 'bottom', 'left', 'right']
+const arrows = [false, true]
+const arrowTypes = ['sharp', 'round']
+
+themes.forEach(theme => {
+  const h1 = document.createElement('h1')
+  h1.textContent = theme
+  container.append(h1)
 
-tippy('body', {
-  appendTo: ref => ref.parentNode,
-  target: '.delegation',
+  placements.forEach(placement => {
+    arrows.forEach(arrow => {
+      arrowTypes.forEach(arrowType => {
+        const button = document.createElement('button')
+        button.textContent = 'Button'
+        container.append(button)
+        tippy(button, {
+          content: 'Tooltip',
+          showOnInit: true,
+          theme,
+          placement,
+          arrow,
+          arrowType,
+        })
+      })
+    })
+  })
 })
diff --git a/src/createTippy.ts b/src/createTippy.ts
@@ -478,12 +478,52 @@ export default function createTippy(
   function createPopperInstance(): void {
     const { popperOptions } = instance.props
     const { tooltip, arrow } = instance.popperChildren
-
     const preventOverflowModifier = getModifier(
       popperOptions,
       'preventOverflow',
     )
 
+    function applyMutations(data: Popper.Data): void {
+      if (instance.props.flip && !instance.props.flipOnUpdate) {
+        if (data.flipped) {
+          instance.popperInstance!.options.placement = data.placement
+        }
+        setFlipModifierEnabled(instance.popperInstance!.modifiers, false)
+      }
+
+      tooltip.setAttribute('x-placement', data.placement)
+
+      const basePlacement = getPopperPlacement(instance.popper)
+      const styles = tooltip.style
+
+      // Account for the `distance` offset
+      styles.top = styles.bottom = styles.left = styles.right = ''
+      styles[basePlacement] = getOffsetDistanceInPx(instance.props.distance)
+
+      const padding =
+        preventOverflowModifier && preventOverflowModifier.padding !== undefined
+          ? preventOverflowModifier.padding
+          : PADDING
+
+      const isPaddingNumber = typeof padding === 'number'
+
+      const computedPadding = {
+        top: isPaddingNumber ? padding : padding.top,
+        bottom: isPaddingNumber ? padding : padding.bottom,
+        left: isPaddingNumber ? padding : padding.left,
+        right: isPaddingNumber ? padding : padding.right,
+        ...(!isPaddingNumber && padding),
+      }
+
+      computedPadding[basePlacement] = isPaddingNumber
+        ? padding + instance.props.distance
+        : (padding[basePlacement] || 0) + instance.props.distance
+
+      instance.popperInstance!.modifiers.filter(
+        m => m.name === 'preventOverflow',
+      )[0].padding = computedPadding
+    }
+
     const config = {
       placement: instance.props.placement,
       ...popperOptions,
@@ -512,44 +552,20 @@ export default function createTippy(
           ...getModifier(popperOptions, 'offset'),
         },
       },
-      onUpdate(data: Popper.Data) {
-        if (instance.props.flip && !instance.props.flipOnUpdate) {
-          if (data.flipped) {
-            instance.popperInstance!.options.placement = data.placement
-          }
-          setFlipModifierEnabled(instance.popperInstance!.modifiers, false)
-        }
-
-        const basePlacement = getPopperPlacement(instance.popper)
-        const styles = tooltip.style
-
-        // Account for the `distance` offset
-        styles.top = styles.bottom = styles.left = styles.right = ''
-        styles[basePlacement] = getOffsetDistanceInPx(instance.props.distance)
+      // This gets invoked when calling `.set()` and updating a popper
+      // instance dependency, since a new popper instance gets created
+      onCreate(data: Popper.Data) {
+        applyMutations(data)
 
-        const padding =
-          preventOverflowModifier &&
-          preventOverflowModifier.padding !== undefined
-            ? preventOverflowModifier.padding
-            : PADDING
-
-        const isPaddingNumber = typeof padding === 'number'
-
-        const computedPadding = {
-          top: isPaddingNumber ? padding : padding.top,
-          bottom: isPaddingNumber ? padding : padding.bottom,
-          left: isPaddingNumber ? padding : padding.left,
-          right: isPaddingNumber ? padding : padding.right,
-          ...(!isPaddingNumber && padding),
+        if (popperOptions && popperOptions.onCreate) {
+          popperOptions.onCreate(data)
         }
-
-        computedPadding[basePlacement] = isPaddingNumber
-          ? padding + instance.props.distance
-          : (padding[basePlacement] || 0) + instance.props.distance
-
-        instance.popperInstance!.modifiers.filter(
-          m => m.name === 'preventOverflow',
-        )[0].padding = computedPadding
+      },
+      // This gets invoked on initial create and show()/scroll/resize update.
+      // This is due to `afterPopperPositionUpdates` overwriting onCreate()
+      // with onUpdate()
+      onUpdate(data: Popper.Data) {
+        applyMutations(data)
 
         if (popperOptions && popperOptions.onUpdate) {
           popperOptions.onUpdate(data)

diff --git a/src/scss/themes/google.scss b/src/scss/themes/google.scss
@@ -3,24 +3,20 @@
 
 $color: #505355;
 
-.tippy-popper {
-  @each $placement in $placements {
-    &[x-placement^='#{$placement}'] {
-      .tippy-tooltip.google-theme {
-        .tippy-arrow {
-          @include arrow($placement, 8px, $color);
-        }
-      }
-    }
-  }
-}
-
 .tippy-tooltip.google-theme {
   background-color: $color;
   padding: 0.25rem 0.4375rem;
   font-size: 0.8125rem;
   font-weight: 600;
 
+  @each $placement in $placements {
+    &[x-placement^='#{$placement}'] {
+      .tippy-arrow {
+        @include arrow($placement, 8px, $color);
+      }
+    }
+  }
+
   .tippy-backdrop {
     background-color: $color;
   }