Как включить всплывающую подсказку при отключенной кнопке?

Вы можете обернуть отключенную кнопку и поместить всплывающую подсказку в обертку:

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

Если оболочка имеет display:inline, то всплывающая подсказка не работает. Использование display:block и display:inline-block, похоже, работает нормально. Он также отлично работает с плавающей оболочкой.

UPDATE Здесь обновлен JSFiddle, который работает с последним Bootstrap (3.3.6). Спасибо @JohnLehmann за предложение pointer-events: none; для отключенной кнопки.

http://jsfiddle.net/cSSUA/209/

Это можно сделать с помощью CSS. Свойство "указатель-события" - это то, что предотвращает появление всплывающей подсказки. Вы можете отключить кнопки для отображения всплывающей подсказки, переопределив свойство "указатель-события", заданное бутстрапом.

.btn.disabled {
    pointer-events: auto;
}

Если вы отчаянно (как и я) для всплывающих подсказок на флажках, текстовых окнах и т.д., то вот мое обходное решение hackey:

$('input:disabled, button:disabled').after(function (e) {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
});

Рабочие примеры: http://jsfiddle.net/WB6bM/11/

В чем его ценность, я считаю, что всплывающие подсказки по элементам запрещенной формы очень важны для UX. Если вы мешаете кому-то что-то делать, вы должны сказать им, почему.

Эти обходные пути уродливы. Я отлаживал проблему: загрузочная загрузка автоматически устанавливает свойство CSS указателей-событий: none для отключенных элементов.

Это волшебное свойство приводит к тому, что JS не может обрабатывать какое-либо событие на элементах, соответствующих селектору CSS.

Если вы переписываете это свойство по умолчанию, все работает как шарм, включая подсказки!

.disabled {
  pointer-events: all !important;
}

Однако вы не должны использовать такой общий селектор, потому что вам, вероятно, придется вручную остановить распространение событий JavaScript, как вы знаете (e.preventDefault()).

Вы не можете получить подсказку для показа на отключенной кнопке. Это связано с тем, что отключенные элементы не запускают никаких событий, включая подсказку. Лучше всего было бы подделать кнопку, которая отключена (поэтому она выглядит и действует как отключенная), поэтому вы можете запускать подсказку.

Eg. Javascript:

$('[rel=tooltip].disabled').tooltip();

$('[rel=tooltip].disabled').bind('click', function(){
     return false;
});

Вместо $('[rel=tooltip]').tooltip();​

HTML:

<hr>
<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>

<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

JSFiddle: http://jsfiddle.net/BA4zM/75/

Вот что я и tekromancr придумал.

Пример элемента:

<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I'm a tooltip">Press Me</a>

note: атрибуты всплывающей подсказки могут быть добавлены в отдельный div, в котором идентификатор этого div должен использоваться при вызове .tooltip('destroy'); или .tooltip();

это позволяет всплывающую подсказку помещать в любой javascript, который включен в html файл. однако, эта строка может не понадобиться. (если всплывающая подсказка показывает без этой строки, то не беспокойтесь, включая ее)

$("#element_id").tooltip();

уничтожает всплывающую подсказку, см. ниже для использования.

$("#element_id").tooltip('destroy');

предотвращает щелчок кнопки. потому что атрибут disabled не используется, это необходимо, в противном случае кнопка все равно будет доступна, даже если она "выглядит", как будто она отключена.

$("#element_id").click(
  function(evt){
    if ($(this).hasClass("btn-disabled")) {
      evt.preventDefault();
      return false;
    }
  });

Используя bootstrap, классы btn и btn-disabled доступны вам. Переопределите их в своем собственном файле .css. вы можете добавить любые цвета или все, что вы хотите, чтобы кнопка выглядела, когда она отключена. Убедитесь, что вы держите курсор: по умолчанию; вы также можете изменить то, что выглядит .btn.btn-success.

.btn.btn-disabled{
    cursor: default;
}

добавьте код ниже, чтобы какой-либо javascript контролировал включение кнопки.

$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');

подсказка теперь должна отображаться только тогда, когда кнопка отключена.

Если вы используете angularjs, у меня также есть решение для этого, если это необходимо.

В моем случае ни одно из вышеперечисленных решений не работало. Я обнаружил, что проще перекрывать отключенную кнопку, используя абсолютный элемент:

<div rel="tooltip" title="I workz" class="wrap">
  <div class="overlap"></div>
  <button>I workz</button>
</div>

<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
  <div class="overlap"></div>
  <button disabled>I workz disabled</button>
</div>

.wrap {
  display: inline-block;
  position: relative;
}

.overlap {
  display: none
}

.poptooltip .overlap {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

Демо

Вы можете просто переопределить стиль "указатель-события" Bootstrap для отключенных кнопок с помощью CSS, например.

.btn[disabled] {
 pointer-events: all !important;
}

Лучше все еще быть явным и отключать определенные кнопки, например.

#buttonId[disabled] {
 pointer-events: all !important;
}

Попробуйте этот пример:

Подсказки должны быть инициализированы с помощью jQuery: выберите указанный элемент и вызовите метод tooltip() в JavaScript:

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

Добавить CSS:

.tool-tip {
  display: inline-block;
}

.tool-tip [disabled] {
  pointer-events: none;
}

И ваш html:

<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip">
    <button disabled="disabled">I am disabled</button>
</span>

Рабочий код для Bootstrap 3.3.6

JavaScript:

$('body').tooltip({
  selector: '[data-toggle="tooltip"]'
});

$(".btn").click(function(e) {
 if ($(this).hasClass("disabled")){
   e.preventDefault();
 }
});

CSS

a.btn.disabled, fieldset[disabled] a.btn {
  pointer-events: auto;
}

pointer-events: auto; не работает на <input type="text" />.

Я использовал другой подход. Я не отключу поле ввода, но сделаю его отключенным с помощью css и javascript.

Поскольку поле ввода не отключено, всплывающая подсказка отображается правильно. Это было в моем случае проще, чем добавление обертки в случае, если поле ввода было отключено.

$(document).ready(function () {
  $('.disabled[data-toggle="tooltip"]').tooltip();
  $('.disabled').mousedown(function(event){
    event.stopImmediatePropagation();
    return false;
  });
});

input[type=text].disabled{
  cursor: default;
  margin-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">