jQuery实现点击盒子保持Tooltip显示，切换点击隐藏原Tooltip

我来帮你解决这个问题！你想要的是点击盒子时Tooltip保持显示，切换选中目标时自动隐藏旧Tooltip的效果，之前的方法因为重复绑定mouseleave事件导致Tooltip永远无法隐藏，我们可以通过标记选中状态+利用Bootstrap Tooltip官方API来实现：

核心思路 #

• 用一个active类标记当前选中的盒子，直观区分选中状态
• 点击盒子时，先统一隐藏所有Tooltip并移除所有盒子的active类，再给当前盒子添加active类并显示其Tooltip
• 鼠标离开盒子时，只有当盒子未被选中（无active类）时才隐藏Tooltip

完整代码实现 #

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

<div class="box" title="box 1"></div>
<div class="box" title="box 2"></div>
<div class="box" title="box 3"></div>
<div class="box" title="box 4"></div>
<div class="box" title="box 5"></div>
<div class="box" title="box 6"></div>

CSS

.box {
  width: 50px;
  height: 50px;
  display: inline-block;
  background-color: lightblue;
  margin: 5px;
  transition: 0.5s ease-in-out;
}
.box:hover {
  background-color: lightpink;
}
/* 选中状态样式，直观区分 */
.box.active {
  background-color: lightcoral;
}

JavaScript

// 初始化所有盒子的Tooltip，保持hover触发逻辑
jQuery(".box").tooltip({
  trigger: 'hover'
});

// 点击盒子时的逻辑
jQuery(".box").click(function() {
  // 1. 隐藏所有盒子的Tooltip
  jQuery(".box").tooltip('hide');
  // 2. 移除所有盒子的选中状态
  jQuery(".box").removeClass('active');
  // 3. 给当前盒子添加选中状态
  jQuery(this).addClass('active');
  // 4. 显示当前盒子的Tooltip
  jQuery(this).tooltip('show');
});

// 鼠标离开盒子时的逻辑
jQuery(".box").mouseleave(function() {
  // 只有非选中状态的盒子，才隐藏Tooltip
  if (!jQuery(this).hasClass('active')) {
    jQuery(this).tooltip('hide');
  }
});

效果说明 #

• 鼠标悬停盒子时，正常显示Tooltip，离开时隐藏（非选中状态）
• 点击任意盒子，该盒子的Tooltip会保持显示，同时盒子变为选中样式
• 点击另一个盒子时，之前选中的盒子Tooltip会自动隐藏，新选中的盒子Tooltip显示

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