javascript - 禁用按钮上的工具提示在 Internet Explorer 上不起作用

Question

我正在使用像这样的解决方案 http://jsfiddle.net/cSSUA/209/用于在禁用按钮上应用工具提示，但它不适用于 Internet Explorer(在我的例子中为 IE11)。

本质上，解决方法是基于包装 div:

<span class="tooltip-wrapper" title="Nessun esito selezionato">
    <button class="btn btn-primary" type="button" disabled><i class="fa fa-check"></i> Rifiuta</button>
</span>

，在 CSS 中:

.tooltip-wrapper {
  display: inline-block; /* display: block works as well */
}

.tooltip-wrapper .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

在 jQuery 中:

$('.tooltip-wrapper').tooltip({position: "bottom"});

我在 DOM 资源管理器中看到工具提示已创建，但我不明白为什么看不到工具提示。

对于我糟糕的英语和对 HTML/CSS/javascript/jQuery/Bootstrap 的了解，我感到非常抱歉。

Answer 1

$(document).ready(function() { 
  $('[data-toggle="tooltip"]').tooltip(); 
});

.tooltip-wrapper {
  display: inline-block; /* display: block works as well */
  margin: 50px; /* make some space so the tooltip is visible */
  z-index: 2;
}

.tooltip-wrapper .btn[disabled] {
  /* don't let button block mouse events from reaching wrapper */
  pointer-events: none;
}

.tooltip-wrapper.disabled {
  /* OPTIONAL pointer-events setting above blocks cursor setting, so set it here */
  cursor: not-allowed;
}

<script
  src="https://code.jquery.com/jquery-1.10.1.js"
  integrity="sha256-663tSdtipgBgyqJXfypOwf9ocmvECGG8Zdl3q+tk+n0="
  crossorigin="anonymous"></script>
  
Add a `title` attribute for your display text, and use the `$('[data-toggle="tooltip"]` attribute to call on your function. Tested in IE11 using JQuery 1.10.1 and it works.
  
<div class="tooltip-wrapper disabled" data-title="tooltip" title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>