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

Question

I'm using a solution like this one http://jsfiddle.net/cSSUA/209/ for applying a tooltip on disabled buttons, but it doesn't work on Internet Explorer (IE11 in my case).

Essentially the workaround is based on a wrapping 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>

, in 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;
}

and in jQuery:

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

I see in DOM explorer that the tooltip is created but I don't understand why I can't see the tooltip.

I'm so sorry for my bad english and for my bad knowledge of 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>