docs update with flipping example

docs/index.html

@@ -92,6 +92,8 @@ <h5 class="text-center text-muted"><span class="hidden-md-down">Hover your curso
               <button class="btn" id="callback-tippy" title="Call ya back!" data-animatefill="false"><i class="material-icons icon-left">call</i>Callbacks</button>
 
               <button class="btn tippy" id="html-tippy" data-theme="light" data-html="template" data-trigger="click" data-interactive="true" data-animatefill="false" data-arrow="true"><i class="material-icons icon-left">code</i>Popover HTML <small class="opacity-low">(click)</small></button>
+
+              <button class="btn flippy" title="I'll flip to the bottom if there's not enough room on the right."><i class="material-icons icon-left">flip</i>Custom flips</button>
             </div>
           </section>
 
@@ -371,6 +373,23 @@ <h4>Finer control over tooltips</h4>
                   to see the settings you can specify.
               </p>
 
+              <p>
+                  Here's an example of how to integrate Popper.js settings into Tippy, so that a tooltip will flip
+                  to the bottom from the right if there's not enough room in the viewport.
+              </p>
+
+<pre>new Tippy('.my-selector', {
+    position: 'right',
+    popperOptions: {
+        modifiers: {
+            flip: {
+                behavior: ['right', 'bottom']
+            }
+        }
+    }
+})
+</pre>
+
               <h4>Callbacks</h4>
 
               <p>If you want things to happen at certain times during a tooltip's show/hide events, you can add callback functions in the settings object. There are 4 to use:</p>

docs/js/app.js

@@ -11,10 +11,24 @@ setTimeout(function() {
 
 new Tippy('.tippy')
 
+new Tippy('.flippy', {
+    position: 'right',
+    animation: 'fade',
+    arrow: true,
+    popperOptions: {
+        modifiers: {
+            flip: {
+                behavior: ['right', 'bottom']
+            }
+        }
+    }
+})
+
 new Tippy('.tippy-link', {
     theme: 'light',
     arrow: true
 })
+
 var instance = new Tippy('#callback-tippy', {
   shown: function() {
     alert('Hello from the shown() callback!')