3

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?

bogardpd
  • 287
  • 1
  • 10
  • Searching around some more, [this answer](https://stackoverflow.com/a/59043633/1151015) seems to indicate that things included in webpack aren't available to – bogardpd Jun 11 '20 at 14:02

1 Answers1

9

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

  • yarn add tippy.js
  • Go to app/javascripts/packs/application.js & add the following lines
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';
window.tippy = tippy;
  • Now use tippy in your rails views like the following
      tippy('#myButton', {
        animation: 'scale',
        content: 'Hi I am working',
      });
Kush Trivedi
  • 364
  • 1
  • 8
  • Adding the line window.tippy = tippy; fixed it.. but why? – cratag Mar 26 '21 at 17:44
  • @cratag I would recommend reading https://stackoverflow.com/questions/61777360/rails-6-webpacker-calling-javascript-function-from-rails-view for answers to your last question – Stephane Paquet Jun 06 '21 at 22:41