Bootstrap工具提示内链接点击失效问题求助（iOS Safari环境）

这个问题的核心是iOS Safari的触摸事件机制与Bootstrap Tooltip的默认关闭逻辑冲突——当点击tooltip内的链接时，事件会先触发tooltip的关闭，导致链接的点击事件被下方元素捕获。以下是两种可行的解决方法：

方法一：阻止事件冒泡+重写Tooltip关闭逻辑 #

步骤1：给Tooltip内的链接添加专属类 #

修改你的HTML代码，给链接加上tooltip-link类，方便后续精准选择：

<a class="btn btn-danger" href="javascript:void(0)" 
   title="This element cannot be deleted, because it has some pending dependencies. <a href='/dependencies' class='text-white text-underline tooltip-link'>See dependencies</a>" 
   data-toggle="tooltip" data-html="true" disabled>
  Delete
</a>

步骤2：添加事件监听阻止冒泡 #

在你的JS代码中添加以下监听，阻止链接的点击事件冒泡到Tooltip容器，避免触发关闭：

// 处理点击事件
$(document).on('click', '.tooltip .tooltip-link', function(e) {
  e.stopPropagation(); // 阻止事件冒泡，避免Tooltip关闭
  window.location.href = $(this).attr('href'); // 手动触发跳转，确保iOS识别
  return false;
});

// 处理iOS触摸事件
$(document).on('touchstart', '.tooltip .tooltip-link', function(e) {
  e.stopPropagation();
});

步骤3：重写Tooltip的hide方法 #

从根源上避免点击内部元素时关闭Tooltip：

$.fn.tooltip.Constructor.prototype.hide = function() {
  // 检查点击目标是否在Tooltip内部
  var target = $(document.activeElement);
  if (target.closest('.tooltip').length) {
    return; // 如果是内部元素，不执行关闭逻辑
  }
  // 否则执行原有的关闭逻辑
  return this._hide();
};

方法二：替换为Bootstrap Popover（更推荐） #

Bootstrap Popover的交互设计原生支持内部可点击元素，触摸事件处理更适配iOS，是更省心的方案：

修改HTML为Popover格式 #

<a class="btn btn-danger" href="javascript:void(0)" 
   data-content="This element cannot be deleted, because it has some pending dependencies. <a href='/dependencies' class='text-white text-underline'>See dependencies</a>" 
   data-toggle="popover" data-html="true" disabled>
  Delete
</a>

初始化Popover #

$('[data-toggle="popover"]').popover({ 
  container: 'body',
  trigger: 'click', // 点击触发，避免 hover 在iOS上的问题
  placement: 'top' // 可根据需求调整位置
});

Popover默认会在点击外部区域时关闭，内部链接的点击事件可以正常触发，无需额外处理。

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