¿Cómo habilitar la información sobre herramientas de Bootstrap en el botón deshabilitado?

Necesito mostrar una información sobre herramientas en un botón deshabilitado y eliminarlo en un botón habilitado. Actualmente, funciona a la inversa.

¿Cuál es la mejor manera de invertir este comportamiento?

$('[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>

Aquí hay una demostración

PD: quiero mantener el disabledatributo.

Aquí hay un código de trabajo: 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");
    }
});

La idea es agregar la información sobre herramientas a un elemento principal con la selectoropción y luego agregar / eliminar el relatributo al habilitar / deshabilitar el botón.

Puede ajustar el botón deshabilitado y poner la información sobre herramientas en el contenedor:

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

Si el contenedor tiene, display:inlineentonces, la información sobre herramientas no parece funcionar. Usando display:blocky display:inline-blockparece funcionar bien. También parece funcionar bien con una envoltura flotante.

ACTUALIZACIÓN Aquí hay un JSFiddle actualizado que funciona con el último Bootstrap (3.3.6). Gracias a @JohnLehmann por sugerir pointer-events: none;el botón deshabilitado.

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

Esto se puede hacer a través de CSS. La propiedad "eventos de puntero" es lo que impide que aparezca la información sobre herramientas. Puede obtener botones deshabilitados para mostrar información sobre herramientas anulando la propiedad "eventos de puntero" establecida por bootstrap.

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

Si estás desesperado (como yo) por la información sobre herramientas en casillas de verificación, cuadros de texto y similares, entonces aquí está mi solución de 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;
});

Ejemplos de trabajo: http://jsfiddle.net/WB6bM/11/

Por lo que vale, creo que la información sobre herramientas en los elementos de formulario deshabilitados es muy importante para UX. Si está evitando que alguien haga algo, debe decirle por qué.

Estas soluciones son feas. He depurado el problema es que bootstrap establece automáticamente los eventos de puntero de propiedad CSS : ninguno en elementos deshabilitados.

Esta propiedad mágica hace que JS no pueda manejar ningún evento en elementos que coincidan con el selector CSS.

Si sobrescribe esta propiedad a la predeterminada, todo funciona de maravilla, ¡incluida la información sobre herramientas!

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

Sin embargo, no debe usar un selector tan general, porque probablemente tendrá que detener manualmente la propagación de eventos de JavaScript de la manera que lo conoce ( e.preventDefault () ).

En mi caso, ninguna de las soluciones anteriores funcionó. Descubrí que es más fácil superponer el botón deshabilitado usando un 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;
}

Manifestación

Prueba este ejemplo:

La información sobre herramientas debe inicializarse con jQuery: seleccione el elemento especificado y llame al tooltip()método en JavaScript:

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

Añadir CSS:

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

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

Y tu html:

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

No puede ver la información sobre herramientas en un botón deshabilitado. Esto se debe a que los elementos deshabilitados no activan ningún evento, incluida la información sobre herramientas. Su mejor opción sería falsificar el botón que está deshabilitado (para que se vea y actúe como si estuviera deshabilitado), para que luego pueda activar la información sobre herramientas.

P.ej. Javascript:

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

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

En lugar de solo $('[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/

Simplemente puede anular el estilo de "eventos de puntero" de Bootstrap para botones deshabilitados a través de CSS, por ejemplo

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

Mejor aún sea explícito y deshabilite botones específicos, por ejemplo

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

Esto es lo que yo y tekromancr inventamos.

Elemento de ejemplo:

<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: los atributos de información sobre herramientas se pueden agregar a un div por separado, en el que la identificación de ese div se utilizará al llamar a .tooltip ('destroy'); o .tooltip ();

esto habilita la información sobre herramientas, póngala en cualquier javascript que esté incluido en el archivo html. Sin embargo, es posible que no sea necesario agregar esta línea. (si la información sobre herramientas muestra sin esta línea, entonces no se moleste en incluirla)

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

destruye la información sobre herramientas, ver abajo para el uso.

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

evita que se pueda hacer clic en el botón. debido a que el atributo deshabilitado no se está utilizando, esto es necesario, de lo contrario, el botón aún se podría hacer clic aunque "parezca" como si estuviera deshabilitado.

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

Usando bootstrap, las clases btn y btn-disabled están disponibles para usted. Anule estos en su propio archivo .css. puedes agregar cualquier color o lo que quieras que se vea el botón cuando esté desactivado. Asegúrese de mantener el cursor: predeterminado; También puede cambiar el aspecto de .btn.btn-success.

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

agregue el siguiente código a cualquier javascript que controle el botón que se habilita

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

la información sobre herramientas ahora solo debe mostrarse cuando el botón está desactivado.

si está utilizando angularjs, también tengo una solución para eso, si lo desea.

Si ayuda a alguien, pude obtener un botón deshabilitado para mostrar una información sobre herramientas simplemente colocando un espacio dentro y aplicando las cosas de información sobre herramientas allí, angularjs a su alrededor ...

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

Basado en Bootstrap 4

Elementos deshabilitados Los elementos con el atributo deshabilitado no son interactivos, lo que significa que los usuarios no pueden enfocar, desplazar o hacer clic en ellos para activar una información sobre herramientas (o popover). Como solución alternativa, querrá activar la información sobre herramientas desde un contenedor o, idealmente, enfocable por teclado usando tabindex = "0", y anular los eventos de puntero en el elemento deshabilitado.

<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 los detalles aquí: Bootstrap 4 doc

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

Puedes imitar el efecto usando CSS3.

Simplemente quite el estado desactivado del botón y la información sobre herramientas ya no aparecerá. Esto es ideal para la validación ya que el código requiere menos lógica.

Escribí esta pluma para ilustrar.

Información sobre herramientas deshabilitada 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>

Simplemente agregue la clase deshabilitada al botón en lugar del atributo deshabilitado para que esté visiblemente deshabilitado.

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

Nota: este botón solo parece estar deshabilitado, pero aún activa eventos, y solo debes tenerlo en cuenta.

pointer-events: auto; no funciona en un <input type="text" /> .

Tomé un enfoque diferente. No deshabilito el campo de entrada, pero hago que actúe como deshabilitado a través de CSS y JavaScript.

Como el campo de entrada no está deshabilitado, la información sobre herramientas se muestra correctamente. En mi caso, fue mucho más simple que agregar un contenedor en caso de que el campo de entrada estuviera deshabilitado.

$(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 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 resolví este problema, al menos con Safari, poniendo "pointer-events: auto" antes de "disabled". El orden inverso no funcionó.