v1.1.0

atomiks · Jul 8, 2017 · 697d08b · 697d08b
1 parent 02005d6
commit 697d08b
Show file tree

Hide file tree

Showing 20 changed files with 566 additions and 383 deletions.
diff --git a/dist/tippy.css b/dist/tippy.css
diff --git a/dist/tippy.js b/dist/tippy.js
diff --git a/dist/tippy.min.js b/dist/tippy.min.js
diff --git a/dist/tippy.standalone.js b/dist/tippy.standalone.js
diff --git a/docs/css/app.css b/docs/css/app.css
@@ -3,15 +3,16 @@ html {
 }
 
 body {
-    font-family: 'Nunito Sans', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-family: 'Nunito', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     background: #3751cc;
     background: -webkit-linear-gradient(left,#5733ea, #4894ff 70%,#a5bcff);
     background: linear-gradient(90deg,#5733ea, #4894ff 70%,#a5bcff);
     color: #34495e;
 }
 
-.text-muted {
-    color: #5d7997 !important;
+.feat-helper-text {
+    color: #6a8bad !important;
+    font-weight: 300;
 }
 
 a:focus {
@@ -294,6 +295,10 @@ main .container-fluid {
     transition: opacity 1s ease;
 }
 
+table {
+    font-size: 1rem;
+}
+
 .table-wrapper {
     position: relative;
 }
@@ -321,20 +326,23 @@ main .container-fluid {
 
 .test-element {
     width: 50px;
-    background-color: #f3f6f9;
-    color: #555;
+    height: 50px;
+    border-radius: 50%;
+    color: white;
+    background: linear-gradient(#5172eb,#928aff);
+    box-shadow: 0 10px 20px -5px rgba(0,20,60,0.1), 0 0 10px rgba(0,20,60,0.05);
+    font-weight: 600;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 0.25rem 0.5rem;
-    margin: 0.5rem;
-    border-radius: 4px;
-    font-size: 14px;
+    margin: 1%;
     cursor: default;
 }
 
 #performance-test {
     display: flex;
+    justify-content: center;
     flex-wrap: wrap;
 }
 

diff --git a/docs/index.html b/docs/index.html
@@ -5,9 +5,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta charset="UTF-8">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,600,700" rel="stylesheet">
   <script defer src="js/focus-ring.js"></script>
-  <script async src="https://buttons.github.io/buttons.js"></script>
+  <script async defer src="https://buttons.github.io/buttons.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
   <link rel="stylesheet" href="tippy/tippy.css">
   <link rel="stylesheet" href="css/app.css">
@@ -50,7 +50,7 @@ <h2 class="hero-subheading">A lightweight, vanilla JavaScript tooltip library</h
         <div class="container-fluid">
           <section id="features">
             <h2 class="heading-top text-center light">Features</h2>
-            <h5 class="text-center text-muted"><span class="hidden-md-down">Hover your cursor over the buttons to see Tippy in action!</span><span class="hidden-lg-up">Tap the buttons to see Tippy in action!</span></h5>
+            <h5 class="text-center text-muted feat-helper-text"><span class="hidden-md-down">Hover your cursor over the buttons to see Tippy in action!</span><span class="hidden-lg-up">Tap the buttons to see Tippy in action!</span></h5>
             <div class="button-showcase d-flex justify-content-center flex-wrap">
               <button class="btn tippy" title="I'm the default tooltip!"><i class="material-icons icon-left">remove</i>Default</button>
 
@@ -99,7 +99,7 @@ <h5 class="text-center text-muted"><span class="hidden-md-down">Hover your curso
           <hr>
 
           <div class="alert alert-info" role="alert">
-            <h5><strong>NOTE:</strong> These docs are only a reflection of the latest version which is v1.0.1. Make sure you're up to date!</h5>
+            <h5><strong>NOTE:</strong> These docs refer to v1. New features from minor version increases are highlighted. Make sure you're up to date!</h5>
           </div>
 
           <hr>
@@ -518,17 +518,22 @@ <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 5 to use:</p>
 
+              <p>Note: Callback functions prior to v1.1 should not have the <code>on</code> prefix; simply use <code>show</code>, <code>hide</code>, etc.
+              However, starting from v1.1 they are deprecated in favor of the more semantic <code>on*</code> names which better indicate a callback function.</p>
+
 <pre><code class="language-javascript">tippy('.tippy', {
-  show: function() {
+  onShow: function() {
     // When the tooltip has been triggered and has started to transition in
+    // Use `show: function() {}` prior to v1.1
+    // Same applies to the other callback functions
   },
-  shown: function() {
+  onShown: function() {
     // When the tooltip has fully transitioned in and is showing
   },
-  hide: function() {
+  onHide: function() {
     // When the tooltip has begun to transition out
   },
-  hidden: function() {
+  onHidden: function() {
     // When the tooltip has fully transitioned out and is hidden
   },
   wait: function(show, event) {
@@ -676,6 +681,13 @@ <h4>AJAX tooltips</h4>
             </div>
 
             <p><a target="_blank" href="https://codepen.io/anon/pen/GEmOQy">Codepen demo</a></p>
+
+            <h4>Reactivity</h4>
+
+            <p>From v1.1, tooltips will now react to content changes. For example, if a paragraph element inside
+            the tooltip is removed or changed, the tooltip will automatically update its position.</p>
+
+            <p>Note: This isn't supported in IE10 natively (unless polyfilled) because it uses <code>MutationObserver</code>.</p>
         </section>
 
         <hr>
@@ -863,7 +875,13 @@ <h4>License</h4>
 
     <div id="template">
       <p>This is an example of an <strong>interactive HTML tooltip</strong> created with a template.</p>
-      <button class="btn btn-danger tippy" onclick="hideHtml()" title="Nested tooltips are possible too!" data-position="bottom" data-theme="transparent" data-duration="[300,200]" data-flipduration="0">Close</button>
+      <button class="btn btn-danger tippy" onclick="hideHtml()" title="Nested tooltips are possible too!"
+      data-animation="fade"
+      data-position="bottom"
+      data-theme="transparent"
+      data-duration="[300,200]"
+      data-flipduration="0"
+      data-arrow="true">Close</button>
     </div>
 
     <div id="manual-template" style="display: none;">

diff --git a/docs/js/app.js b/docs/js/app.js
@@ -47,8 +47,8 @@ tippy('.tippy-link', {
 })
 
 tippy('#callback-tippy', {
-    shown: function() {
-        alert('Hello from the shown() callback!')
+    onShown: function() {
+        alert('Hello from the onShown() callback!')
         document.getElementById('callback-tippy').blur()
     }
 })
@@ -57,7 +57,7 @@ tippy('#callback-tippy', {
 var template = $('#template')
 var htmlTip = tippy('#html-tippy', {
   html: template,
-  shown: function() {
+  onShown: function() {
     if (window.innerWidth < 976) {
       var nestedRefEl = template.querySelector('.btn')
       instance.show(instance.getPopperElement(nestedRefEl))
@@ -75,34 +75,27 @@ var tip = tippy($ajax.btn, {
     theme: 'light',
     arrowSize: 'big',
     animation: 'perspective',
-    show: function() {
+    onShow: function() {
         if (tip.loading || $ajax.template.innerHTML !== ajaxInitialText) return
 
         tip.loading = true
 
         fetch('https://unsplash.it/200/?random').then(function(resp) {
             return resp.blob()
         }).then(function(blob) {
-          var refData = tip.getReferenceData($ajax.btn)
           var url = URL.createObjectURL(blob)
           $ajax.template.innerHTML = '<img width="200" height="200" src="' + url + '">'
           tip.loading = false
-
-          refData.popperInstance.update()
         }).catch(function(err) {
-          var refData = tip.getReferenceData($ajax.btn)
-
           tip.loading = false
           $ajax.template.innerHTML = 'There was an error loading the image'
 
-          refData.popperInstance.update()
-
           setTimeout(function() {
             $ajax.template.innerHTML = ajaxInitialText
-          }, 1000)
+          }, 2000)
         })
     },
-    hidden: function() {
+    onHidden: function() {
       $ajax.template.innerHTML = ajaxInitialText
     },
     popperOptions: {
@@ -146,22 +139,18 @@ var jsperf = (function() {
                 var el = document.createElement('div')
                 el.title = 'Performance test'
                 el.className = 'test-element'
-                el.innerHTML = '#' + i
+                el.innerHTML = i
                 $perf.test.appendChild(el)
             }
 
             counter += base
 
             var t1 = performance.now()
             instance = tippy('.test-element', {
-                animation: 'perspective',
                 hideOnClick: false,
-                duration: 200,
+                duration: 0,
                 arrow: true,
-                performance: true,
-                theme: 'transparent',
-                size: 'small',
-                arrowSize: 'small'
+                performance: true
             })
             var t2 = performance.now()