Tippyjs: not working on turbolinks rails application

Created on 27 Sep 2018 · 8Comments · Source: atomiks/tippyjs

in case on rails application with turbolink, tippy js not working

but, with not use turbolinks tippy js is beatiful

Source

maulayyacyber

Most helpful comment

See the edit I made to it

atomiks on 27 Sep 2018

❤1 🎉1 👍1

All 8 comments

I think this was a problem a while ago due to appendTo: document.body because the body element gets replaced/switched out when navigating. But it was changed and now it's appendTo: () => document.body, and is evaluated on each tippy() call.

Make sure tippy() gets invoked again when navigating?

Or maybe try this each time a link is clicked for active tippy instances?:

tip.set({ appendTo: document.body })

atomiks on 27 Sep 2018

i'm put tippy.set({appendTo: document.body}); to application.js rails but same

any idea ?

maulayyacyber on 27 Sep 2018

If you post some reproducible code I can help

atomiks on 27 Sep 2018

in the application.js i'm write the code :

//= require tippy.all.min
tippy.set({appendTo: document.body});

then, in the view like it:

<h5 class="card-title" data-tippy="<%= data.file_name %>"><%= title %></h5>

maulayyacyber on 27 Sep 2018

I'm really not sure about how your app works, but...

First make sure that your script is running after the DOM has constructed the elements you give tippys to.

This means either:

Place the script at the bottom of <body>
Place it in <head> and use defer attribute

If that's done:

From Turbolinks docs you observe page changes using this listener:

document.addEventListener("turbolinks:load", function() {
})

You need to grab all the tippy'd elements and change their instances:

document.addEventListener("turbolinks:load", () => {
  const cards = [...document.querySelectorAll('.card-title')]
  cards.forEach(card => {
    if (card._tippy) {
      card._tippy.set({ appendTo: document.body })
    }
  })
})

If this doesn't work try this:

document.addEventListener("turbolinks:load", () => {
  const cards = [...document.querySelectorAll('.card-title')]
  cards.forEach(card => {
    card._tippy && card._tippy.destroy()
    tippy(card, { content: card.getAttribute('data-tippy') })
  })
})

atomiks on 27 Sep 2018

i'm try the code second, but result

screen shot 2018-09-27 at 19 41 09