title: Rails 6, webpack, and tippy.js giving "tippy is not defined" - Where do I call the tippy() function?
body: <p>I'm relatively new to using Webpack with Rails.  I'm attempting to install <a href="https://atomiks.github.io/tippyjs/v6/getting-started/" rel="nofollow noreferrer">tippy.js</a> on a Rails 6 app, but I'm having trouble getting it accessible to the view. (I can get it to work if I just include the tippy.js CDN in a script tag in the view, but I can't get it to work by using webpack/yarn.)</p>
  
  <p>Per the tippy.js <a href="https://atomiks.github.io/tippyjs/v6/getting-started/" rel="nofollow noreferrer">instructions</a>, I've installed tippy.js with yarn. My <strong><code>package.json</code></strong> file:</p>
  
  <pre><code>{
    "//": [
      "moment - used in time_zones",
      "popper.js - needed for bootstrap"
    ],
    "dependencies": {
      "@rails/ujs": "^6.0.3-1",
      "@rails/webpacker": "5.1.1",
      "bootstrap": "^4.5.0",
      "jquery": "^3.5.1",
      "jquery-ui": "^1.12.1",
      "jquery-ujs": "^1.2.2",
      "moment": "^2.26.0",
      "popper.js": "^1.16.1",
      "tippy.js": "^6.2.3",
      "webpack": "^4.43.0"
    },
    "devDependencies": {
      "webpack-dev-server": "^3.11.0"
    },
    "resolutions": {}
  }
  </code></pre>
  
  <p>The instructions then say to import tippy and its CSS, so I did that in <strong><code>app/javascript/packs/application.js</code></strong>:</p>
  
  <pre><code>import "core-js/stable";
  
  require("@rails/ujs").start();
  require("jquery");
  
  import tippy from "tippy.js";
  import 'tippy.js/dist/tippy.css';
  console.log("loaded tippy");
  </code></pre>
  
  <p>Then, in my <strong><code>index.html.erb</code></strong> view, I follow their <a href="https://atomiks.github.io/tippyjs/v6/creation/" rel="nofollow noreferrer">creation</a> examples to create a sample button, and, per their <a href="https://atomiks.github.io/tippyjs/v6/faq/" rel="nofollow noreferrer">nothing is working FAQ</a>, call tippy at the end of the body:</p>
  
  <pre><code>&lt;button data-tippy-content="Tooltip"&gt;Text&lt;/button&gt;
  
  ...
  
  &lt;script&gt;
    tippy('[data-tippy-content]');
  &lt;/script&gt;
  </code></pre>
  
  <p>However, I don't get a tooltip, and in the console, I get an "Uncaught ReferenceError: tippy is not defined" for the line containing <code>tippy('[data-tippy-content]');</code>.</p>
  
  <h1>Things I've tried:</h1>
  
  <h2>Putting Tippy in ProvidePlugin within config/webpack/environment.js</h2>
  
  <p>I had to do this to get jQuery to work, so I figured I might have to do something similar for tippy.js:</p>
  
  <pre><code>const { environment } = require('@rails/webpacker')
  
  const webpack = require('webpack')
  environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
      $: 'jquery/src/jquery',
      jQuery: 'jquery/src/jquery',
      tippy: 'tippy.js'
    })
  )
  
  module.exports = environment
  </code></pre>
  
  <p>Didn't change anything; still got the ReferenceError in my view. I suspect I might be doing something wrong here; I could find a bunch of examples of how to ProvidePlugin for jQuery, but not much online for anything else.</p>
  
  <h2>Removing <code>tippy('[data-tippy-content]');</code> from the view and putting it in app/javascript/packs/application.js</h2>
  
  <pre><code>import "core-js/stable";
  
  require("@rails/ujs").start();
  require("jquery");
  
  import tippy from "tippy.js";
  import 'tippy.js/dist/tippy.css';
  tippy('[data-tippy-content]');
  console.log("loaded tippy");
  </code></pre>
  
  <p>I no longer got the ReferenceError, but the tooltips didn't work either. So somehow tippy didn't get initialized in any way that the view recognized.</p>
  
  <h2>Using the exact CDN example from their <a href="https://atomiks.github.io/tippyjs/v6/faq/" rel="nofollow noreferrer">nothing is working FAQ</a> in the view:</h2>
  
  <pre><code>&lt;body&gt;
      &lt;button&gt;Text&lt;/button&gt;
  
      &lt;script src="https://unpkg.com/@popperjs/core@2"&gt;&lt;/script&gt;
      &lt;script src="https://unpkg.com/tippy.js@6"&gt;&lt;/script&gt;
      &lt;script&gt;
        tippy('button', {content: 'tooltip'});
      &lt;/script&gt;
  &lt;/body&gt;
  
  </code></pre>
  
  <p>Works -- I get the tooltip and no console errors -- but it defeats the whole point of using webpack to have to include CDN script tags in my views.</p>
  
  <hr>
  
  <p>How and where should I call the <code>tippy('[data-tippy-content]');</code> so that my view will properly include a tippy.js tooltip for all tags with the data-tippy-content attribute?</p>