Ruby on Rails 6. Using Bootstrap 4 tooltips with Ajax

Question

I have set up Bootstrap 4, Jquery and Popper.js through Webpacker.

The application.js file (app/javascript/packs/application.js):

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import "bootstrap"

document.addEventListener("turbolinks:load", () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('[data-toggle="popover"]').popover()
})

The environment.js file (config/webpack/environment.js):

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.append('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    Popper: ['popper.js', 'default']
  })
)

environment.config.set('resolve.alias', {jquery: 'jquery/src/jquery'});

module.exports = environment

With that settings my tooltips work fine, until I start using Ajax. After changing the page using Ajax, tooltips stop working.

I've tried to insert the $('[data-toggle="tooltip"]').tooltip() code to my js.erb files, but I always get the 'tooltip is not a function' error in a browser console:

VM26:4 Uncaught TypeError: $(...).tooltip is not a function
    at <anonymous>:4:30
    at processResponse (rails-ujs.js:283)
    at rails-ujs.js:196
    at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
(anonymous) @ VM26:4
processResponse @ rails-ujs.js:283
(anonymous) @ rails-ujs.js:196
xhr.onreadystatechange @ rails-ujs.js:264

A part of the page view with element using a tooltip:

...
      <td class="pl-2">
        <%= link_to @card, method: :delete, data: { confirm: "You sure?" }, 
            remote: true do %>
          <i class="fas fa-times" id="deleteIcon" 
             data-toggle="tooltip" title="Delete"></i>
        <% end %>
      </td>
...

How can I make it work?

And I just noticed that tooltips stop working when using pagination links (they're also do pagination through 'remote: true'). — Ivan
– Ivan, Commented Jul 17, 2020 at 21:41
I'm having the same problem, any partial I load via Ajax can't find things from my app/javascript/packs/application.js. Were you ever able to figure it out? — oobie11
– oobie11, Commented Oct 20, 2020 at 20:12
I just started using 'tippy.js' instead of Bootstrap tooltips. — Ivan
– Ivan, Commented Oct 22, 2020 at 0:28

tripscape · Accepted Answer · 2021-07-27 21:20:11Z

1

For anyone reading this in the future, this is how I was able to solve the problem.

I have to destroy (dispose) all the bootstrap tooltips and recreate them. You can call this in your ajax success. In my case I'm using stimulus reflex and morphing the page so I call it in a finalizeReflex callback.

$('[data-toggle="tooltip"]').tooltip('dispose');
$('[data-toggle="tooltip"]').tooltip();

Obviously a hacky way to fix the tooltips but its all I've been able to manage.

answered Jul 27, 2021 at 21:20

tripscape

112 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Ruby on Rails 6. Using Bootstrap 4 tooltips with Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related