title: Tippy.js cannot get tooltip to programatically show using .show() function
body: <p>I've recently been trying to implement tooltips to display errors in long documents that contains a scroll bar. I had originally started with using bootstrap tooltips but ran into some limitations with z-index described here: <a href="https://stackoverflow.com/questions/45423564/unable-to-get-bootstrap-tooltip-to-display-above-div-when-inside-scroll-pane">Unable to get Bootstrap Tooltip to display above div when inside scroll pane</a></p>
  <p>I've since tried switching over to <a href="https://atomiks.github.io/tippyjs/" rel="nofollow noreferrer" title="Tippy.js">tippy.js</a> hoping to have better luck. I have not however been able to get the tooltips to show up programatically using the exact same example as the documentation:</p>
  <pre><code>const tip = tippy('#myButton')
  const el = document.querySelector('#myButton')
  const popper = tip.getPopperElement(el)
  tip.show(popper)
  </code></pre>
  <p>Basically it still has the normal hover behavior. I've created a jsfiddle example of almost exactly how my current page is laidout and hoping to trigger the tooltip to show on page load, not on hover!</p>
  <p>Here is the jsfiddle: <a href="https://jsfiddle.net/L3jv4a9w/1/" rel="nofollow noreferrer">https://jsfiddle.net/L3jv4a9w/1/</a></p>