всплывающая подсказка на отключенной кнопке не работает в inte rnet explorer - PullRequest
1 голос
/ 13 марта 2020

Я использую подобное решение http://jsfiddle.net/cSSUA/209/ для применения всплывающей подсказки к отключенным кнопкам, но оно не работает в Inte rnet 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 explorer, что всплывающая подсказка создана, но я не понимаю, почему я не вижу подсказку.

Мне очень жаль за мой плохой английский sh и за мой плохой знание HTML / CSS / javascript / jQuery / Bootstrap.

1 Ответ

0 голосов
/ 19 марта 2020

$(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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...