webpackyarnpkgruby-on-rails-6tippyjs

Rails 6, webpack, and tippy.js giving "tippy is not defined" - Where do I call the tippy() function?

I'm relatively new to using Webpack with Rails. I'm attempting to install tippy.js 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.)

Per the tippy.js instructions, I've installed tippy.js with yarn. My package.json file:

{
  "//": [
    "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": {}
}

The instructions then say to import tippy and its CSS, so I did that in app/javascript/packs/application.js:

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");

Then, in my index.html.erb view, I follow their creation examples to create a sample button, and, per their nothing is working FAQ, call tippy at the end of the body:

<button data-tippy-content="Tooltip">Text</button>

...

<script>
  tippy('[data-tippy-content]');
</script>

However, I don't get a tooltip, and in the console, I get an "Uncaught ReferenceError: tippy is not defined" for the line containing tippy('[data-tippy-content]');.

Things I've tried:

Putting Tippy in ProvidePlugin within config/webpack/environment.js

I had to do this to get jQuery to work, so I figured I might have to do something similar for tippy.js:

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

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.

Removing tippy('[data-tippy-content]'); from the view and putting it in app/javascript/packs/application.js

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");

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.

Using the exact CDN example from their nothing is working FAQ in the view:

<body>
    <button>Text</button>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      tippy('button', {content: 'tooltip'});
    </script>
</body>

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.

How and where should I call the tippy('[data-tippy-content]'); so that my view will properly include a tippy.js tooltip for all tags with the data-tippy-content attribute?

Solution

  • You can add tippy.js easily in rails 6 :-

    import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
window.tippy = tippy;

          tippy('#myButton', {
        animation: 'scale',
        content: 'Hi I am working',
      });