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

Вот рабочий код: http://jsfiddle.net/mihaifm/W7XNU/200/

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

$(".btn").click(function(e) {
    if (! $(this).hasClass("disabled"))
    {
        $(".disabled").removeClass("disabled").attr("rel", null);

        $(this).addClass("disabled").attr("rel", "tooltip");
    }
});

Идея состоит в том, чтобы добавить всплывающую подсказку к родительскому элементу с параметром selector, а затем добавить / удалить атрибут rel при включении / отключении кнопки.

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

<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, похоже, работает нормально. Также кажется, что он отлично работает с плавающей оберткой.

ОБНОВЛЕНИЕ Вот обновленный JSFiddle, который работает с последней версией Bootstrap (3.3.6). Спасибо @JohnLehmann за предложение pointer-events: none; для отключенной кнопки.

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

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

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

Отключенные элементы Элементы с отключенным атрибутом не являются интерактивными, то есть пользователи не могут сфокусироваться, навести на них курсор или щелкнуть по ним, чтобы вызвать всплывающую подсказку (или всплывающее окно). В качестве обходного пути вы захотите вызвать всплывающую подсказку из оболочки или, в идеале, сделать фокусировку клавиатуры с помощью tabindex = "0" и переопределить события указателя на отключенном элементе.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Все подробности здесь: Bootstrap 4 doc

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

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

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

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

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

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

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

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

Например. 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/

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

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

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

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

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

<button ng-click="$ctrl.onClickDoThis()"
        ng-disabled="!$ctrl.selectedStuff.length">
  <span tooltip-enable="!$ctrl.selectedStuff.length"
        tooltip-append-to-body="true"
        uib-tooltip="Select at least one thing to enable button.">
    My Butt
  </span>
</button>

Это то, что придумали я и 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>

примечание: атрибуты всплывающей подсказки могут быть добавлены в отдельный 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. вы можете добавить любые цвета или все, что хотите, чтобы кнопка выглядела в отключенном состоянии. Убедитесь, что вы держите курсор: default; вы также можете изменить внешний вид .btn.btn-success.

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

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

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

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

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

Рабочий код для 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;
}

Вы можете имитировать эффект с помощью 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>

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

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

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

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

Для 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>

Я наконец решил эту проблему, по крайней мере, с Safari, отключив "pointer-events: auto" до ". Обратный порядок не сработал.

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

Да, отключено, остановлены все функции событий, такие как ObBlur, onClick / OnFocus. вместо строки ниже:

((document.getElmentByName ('MYINPUTBTN'). item (0))). disabled = true;

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

((document.getElmentByName ('MYINPUTBTN'). item (0))). setAttribute (style, background-color: # e9ecef;);

б

Надеюсь, это решит проблему.