Как включить bootstrap tooltip на отключенной кнопке?

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

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

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

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

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

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

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

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

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

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

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

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

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

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