Rails中Bootstrap提示框在浏览器后退后持续显示的问题

这个问题我之前在项目里也碰到过，本质是Turbolinks的页面缓存机制在搞鬼——它会把当前页面的DOM状态原封不动存起来，包括Bootstrap tooltip的激活状态，所以你点击返回按钮回到原页面时，缓存里的tooltip还是处于激活显示的状态，甚至没法正常隐藏。

下面是我验证过的解决方案，分两步处理：

1. 正确初始化Tooltip（适配Turbolinks） #

Turbolinks的页面切换是局部替换DOM，不是全页刷新，所以不能只在$(document).ready()里初始化tooltip，要改用Turbolinks的turbolinks:load事件，确保每次页面加载（包括缓存回退）都能正确绑定tooltip：

document.addEventListener('turbolinks:load', function() {
  // 这里用你实际的选择器，比如绑定在图片上就用 $('img[data-toggle="tooltip"]')
  $('[data-toggle="tooltip"]').tooltip();
});

2. 缓存页面前清理Tooltip状态 #

在Turbolinks把页面存入缓存前，我们要主动关闭所有激活的tooltip，这样缓存的页面状态就是tooltip都处于隐藏状态的，返回时就不会有残留问题：

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

原理说明 #

• turbolinks:before-cache事件会在页面被Turbolinks缓存之前触发，此时执行tooltip('hide')会把所有激活的提示框关闭，确保缓存的DOM没有显示中的tooltip。
• turbolinks:load则会在每次页面加载（包括首次加载、Turbolinks跳转、缓存回退）时触发，保证新的DOM元素（或者缓存里的DOM）都能正确绑定tooltip的交互事件。

如果你的tooltip是绑定在特定元素（比如链接内的图片）上，只需要把选择器换成对应的即可，比如$('a img[data-toggle="tooltip"]')，逻辑是一样的。

内容的提问来源于stack exchange，提问作者Andrew