Como ativar a dica de ferramenta do Bootstrap no botão desativado?

Preciso exibir uma dica de ferramenta em um botão desativado e removê-lo em um botão ativado. Atualmente, ele funciona ao contrário.

Qual é a melhor maneira de inverter esse comportamento?

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Aqui está uma demonstração

PS: Eu quero manter o disabledatributo.

Aqui está um código de trabalho: 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");
    }
});

A ideia é adicionar a dica de ferramenta a um elemento pai com a selectoropção e, em seguida, adicionar / remover o relatributo ao ativar / desativar o botão.

Você pode quebrar o botão desativado e colocar a dica de ferramenta no wrapper:

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

Se o wrapper tiver display:inline, a dica de ferramenta não parece funcionar. Usando display:blocke display:inline-blockparece funcionar bem. Também parece funcionar bem com um invólucro flutuante.

ATUALIZAÇÃO Aqui está um JSFiddle atualizado que funciona com o Bootstrap mais recente (3.3.6). Obrigado a @JohnLehmann por sugerir pointer-events: none;o botão desativado.

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

Isso pode ser feito via CSS. A propriedade "pointer-events" é o que está impedindo a exibição da dica. Você pode ativar os botões desabilitados para exibir a dica de ferramenta substituindo a propriedade "pointer-events" definida pela inicialização.

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

Se você está desesperado (como eu estava) por dicas de ferramentas em caixas de seleção, caixas de texto e coisas do gênero, aqui está minha solução para o 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;
});

Exemplos de trabalho: http://jsfiddle.net/WB6bM/11/

Pelo que vale, acredito que dicas de ferramentas sobre elementos de formulário desativados são muito importantes para o UX. Se você está impedindo alguém de fazer alguma coisa, deve dizer o motivo.

Essas soluções alternativas são feias. Eu depurei o problema é que o bootstrap define automaticamente a propriedade CSS pointer-events: none nos elementos desativados.

Essa propriedade mágica faz com que o JS não consiga manipular nenhum evento em elementos que correspondam ao seletor CSS.

Se você substituir essa propriedade como padrão, tudo funcionará como um encanto, incluindo dicas de ferramentas!

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

No entanto, você não deve usar um seletor tão geral, porque provavelmente terá que parar manualmente a propagação de eventos JavaScript da maneira que conhece ( e.preventDefault () ).

No meu caso, nenhuma das soluções acima funcionou. Descobri que é mais fácil sobrepor o botão desativado usando um elemento absoluto como:

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

Demo

Tente este exemplo:

As dicas de ferramentas devem ser inicializadas com jQuery: selecione o elemento especificado e chame o tooltip()método em JavaScript:

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

Adicionar CSS:

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

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

E seu html:

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

Você não pode exibir a dica de ferramenta em um botão desativado. Isso ocorre porque os elementos desativados não acionam nenhum evento, incluindo a dica de ferramenta. Sua melhor aposta seria falsificar o botão que está sendo desativado (para que pareça e atue como desativado), para que você possa acionar a dica de ferramenta.

Por exemplo. Javascript:

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

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

Em vez de apenas $('[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/

Você pode simplesmente substituir o estilo "pointer-events" do Bootstrap para botões desativados via CSS, por exemplo

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

Melhor ainda ser explícito e desativar botões específicos, por exemplo

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

Foi isso que eu e o tekromancr inventamos.

Elemento de exemplo:

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

nota: os atributos da dica de ferramenta podem ser adicionados a uma div separada, na qual o ID dessa div deve ser usado ao chamar .tooltip ('destroy'); ou .tooltip ();

isso habilita a dica de ferramenta, coloque-a em qualquer javascript incluído no arquivo html. essa linha pode não ser necessária para adicionar, no entanto. (se a dica de ferramenta mostrar sem esta linha, não se preocupe em incluí-la)

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

destrói a dica de ferramenta, veja abaixo o uso.

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

impede que o botão seja clicável. porque o atributo desativado não está sendo usado, isso é necessário; caso contrário, o botão ainda poderá ser clicado, mesmo que "pareça" como se estivesse desativado.

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

Usando o bootstrap, as classes btn e btn-disabled estão disponíveis para você. Substitua-os em seu próprio arquivo .css. você pode adicionar qualquer cor ou o que você deseja que o botão fique quando desativado. Certifique-se de manter o cursor: padrão; você também pode alterar a aparência do .btn.btn-success.

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

adicione o código abaixo a qualquer javascript que esteja controlando o botão que está sendo ativado.

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

agora, a dica de ferramenta deve aparecer apenas quando o botão estiver desativado.

se você estiver usando angularjs, também tenho uma solução para isso, se desejado.

Se isso ajuda alguém, consegui um botão desabilitado para mostrar uma dica de ferramenta, basta colocar um espaço dentro dela e aplicar o material da dica de ferramenta lá, angularjs em volta ...

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

Baseado no Bootstrap 4

Elementos desativados Elementos com o atributo desativado não são interativos, o que significa que os usuários não podem se concentrar, passar o mouse ou clicar neles para acionar uma dica de ferramenta (ou popover). Como solução alternativa, você desejará acionar a dica de ferramenta de um wrapper ou, idealmente, tornar o foco do teclado usando tabindex = "0" e substituir os eventos do ponteiro no elemento desativado.

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

Todos os detalhes aqui: Bootstrap 4 doc

Código de trabalho para o 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;
}

Você pode imitar o efeito usando CSS3.

Simplesmente desative o estado desativado e a dica não aparecerá mais. Isso é ótimo para validação, pois o código requer menos lógica.

Eu escrevi esta caneta para ilustrar.

Dicas de ferramenta desativadas do 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>

Basta adicionar a classe desabilitada ao botão em vez do atributo desabilitado para torná-la visivelmente desabilitada.

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

Nota: esse botão parece estar desativado, mas ainda aciona eventos, e você só precisa estar atento a isso.

pointer-events: auto;não funciona em um <input type="text" />.

Eu tomei uma abordagem diferente. Eu não desative o campo de entrada, mas faça-o funcionar como desabilitado via css e javascript.

Como o campo de entrada não está desativado, a dica de ferramenta é exibida corretamente. No meu caso, era mais simples do que adicionar um wrapper, caso o campo de entrada estivesse desabilitado.

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

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

Finalmente resolvi esse problema, pelo menos com o Safari, colocando "eventos-ponteiro: auto" antes de "desativado". A ordem inversa não funcionou.