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

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

<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, который работает с последней загрузкой (3.3.6). Спасибо @JohnLehmann за предложение pointer-events: none; для отключенной кнопки.

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

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

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

Если вы отчаянно (как и я) для подсказок на флажках, текстовых полях и тому подобное, то вот мой хакерский обходной путь:

$('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. Если вы мешаете кому-то что-то сделать, вы должны сказать им, почему.

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

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

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

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

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

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

например. Javascript:

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

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

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/

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

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

демо

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

подсказки должны быть инициализированы с 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>

вот что придумали мы с текроманкром.

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

<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>

Примечание: атрибуты всплывающей подсказки могут быть добавлены в отдельный div, в котором идентификатор этого div должен использоваться при вызове .подсказка('уничтожить'); или .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-успех выглядит так.

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

добавьте код ниже к тому, что javascript управляет кнопкой, которая становится включенной.

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

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

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

вы можете просто переопределить стиль Bootstrap "pointer-events" для отключенных кнопок через CSS, например

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

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

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

рабочий код для 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">

Вы можете имитировать эффект с помощью CSS3.

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

Я написал эту ручку, чтобы проиллюстрировать.

CSS3 отключены всплывающие подсказки

[disabled] {
  &[disabled-tooltip] {
    cursor:not-allowed;
    position: relative;
    &:hover {
      &:before {
        content:'';
        border:5px solid transparent;
        border-top:5px solid black;
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -5px));
      }
      &:after {
        content: attr(disabled-tooltip);
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -15px));
        width:280px;
        background-color:black;
        color:white;
        border-radius:5px;
        padding:8px 12px;
        white-space:normal;
        line-height:1;
      }
    }
  }
}

<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>

Для Bootstrap 3

HTML-код

<button 
    class="btn btn-success" 
    disabled
    data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Submit button
</button>

в CSS

button { position:relative; }

.sp-btn-overlap { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background:none; 
    border:none; 
    z-index:1900;
}

JS

$('button .sp-btn-overlap')
    .popover({
        trigger: 'hover',
        container: 'body',
        placement: 'bottom',
        content: function() {
            return $(this).parent().prop('disabled')
                    ? $(this).data('hint')
                    : $(this).parent().data('hint');
            }
        });

$('button .sp-btn-overlap')
  .popover({
    trigger: 'hover',
    container: 'body',
    placement: 'bottom',
    content: function() {
      return $(this).parent().prop('disabled')
                  ? $(this).data('hint')
                  : $(this).parent().data('hint'); }
  });

button {
  position:relative; /* important! */
}

.sp-btn-overlap {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:none;
  border:none;
  z-index:1900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button disabled class="btn btn-default" data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Disabled button
</button>

<button class="btn btn-default" data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Enabled button
</button>