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

Question

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

我正在使用 Rails 5 w/ Turbolinks。

情况如下：

我单击具有 Bootstrap 工具提示的 link
link 将我带到新页面
我在浏览器中导航回原始页面（后退按钮）
我在第 1 步中单击的 link 的工具提示是 active/shown 并且无法隐藏

我尝试将工具提示放在 link 内的元素（图像）上，但结果是一样的。

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>

更新：

单击带有工具提示 on/within 的 link 可能会出现问题。我只是尝试在新选项卡中打开 link（因此没有向后导航，只是关闭新选项卡），并且工具提示仍然保持活动状态，直到在原始页面上单击不同的 link。

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

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

Bootstrap tooltip persists after browser back navigation in Rails

javascript

ruby-on-rails

twitter-bootstrap

turbolinks

twitter-bootstrap-tooltip