在Rails中浏览器返回导航后,Bootstrap工具提示仍然存在

Question

使用Bootstrap工具提示时遇到一些困难,特别是让它们隐藏在向后导航上.

我在Rails 5 w/Turbolinks上.

这是发生的事情:

1. 我单击一个具有Bootstrap工具提示的链接
2. 该链接将我带到一个新页面
3. 我导航回浏览器中的原始页面(后退按钮)
4. 我在步骤1中单击的链接的工具提示处于活动/显示状态,无法隐藏

我已经尝试将工具提示放在链接内的元素(图像)上,但结果是一样的.

JS:

$(document).on('turbolinks:load', function(event) {
  $(function () {
    $('[data-toggle="tooltip"]').tooltip()
  });
})

rails视图助手:

<%= link_to sample_path, data: { toggle: :tooltip, placement: :bottom }, title: "Title to display" do %>
  <%= image_tag "image-src-url", alt: "Alt goes here" %>
<% end %>

HTML输出:

<a data-toggle="tooltip" data-placement="bottom" title="" href="/sample-path" data-original-title="Title to display">
  <img alt="Alt goes here" src="image-src-url">
</a>

更新:

点击其上/内有工具提示的链接可能会出现问题.我只是尝试在新选项卡中打开链接(因此没有向后导航,只关闭新选项卡),工具提示仍保持活动状态,直到在原始页面上单击其他链接.

Answer 1

在这种情况下,您需要准备要缓存的页面并关闭工具提示before-cached,请尝试以下代码:

document.addEventListener("turbolinks:before-cache", function () {
    $('[data-toggle="tooltip"]').tooltip('hide');
});

我建议你阅读turbolink文档:https://github.com/turbolinks/turbolinks#preparing-the-page-to-be-cached