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


171

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.


el botón que debe deshabilitarse está deshabilitado ...
KoU_warch

@EH_warch Quiero mantener el botón deshabilitado pero al mismo tiempo mostrar información sobre herramientas en caso de clic.
Lorraine Bernard el

2
Esto no ayudará al OP, pero los futuros visitantes pueden apreciar saber que el atributo 'readonly' es similar (aunque no idéntico) y no bloquea los eventos del usuario como el mouseover.
Chuck

Respuestas:


20

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.


44
Es la respuesta aceptada porque funcionó en 2012, cuando fue respondida. Las cosas han cambiado desde entonces, principalmente los recursos externos utilizados en el violín. Agregué nuevas URL a bootstrap cdn, el código sigue siendo el mismo.
Mihai

3
¿Puedo obtener una solución actualizada para esto para Bootstrap versión 4.1?
Jason Ayer

258

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/


55
¡Esto es lo que sugieren los documentos y funciona si usas el truco de bloque en línea sugerido aquí!
Abogado del Diablo

44
Sin embargo, si su botón es parte de un grupo de botones, entonces envolver el botón desvanece su estética :( ¿De todos modos superar este problema para btn-groups?
Cody

2
Cody, para btn-groups, descubrí que no puedes envolverlos, o no se procesarán correctamente. Establecí los eventos de puntero en 'auto' (solo apuntado con: "div.btn-group> .btn.disabled {pointer-events: auto;}" por si acaso), y también conecté el evento onclick del botón para solo devuelve falso. Me sentí hacky, pero funcionó para nuestra aplicación.
Michael

3
Esto no parece funcionar en bootstrap 3.3.5. JSFiddle
bytes

18
Para bootstrap 3.3.5 también agregue .btn-default [deshabilitado] {pointer-events: none; }
John Lehmann

111

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

1
Solo una nota al margen, esto solo funciona para IE en 11 o superior. Casi todos los demás navegadores modernos lo han soportado por un tiempo. Ver: caniuse.com/#feat=pointer-events
Neil Monroe

11
Esto no parece funcionar en los [disabled]botones. Tampoco veo Bootstrap (2.3.2) asignando eventos de puntero en cualquier lugar de la fuente.
kangax

1
@kangax tienes razón, esto solo funcionará para los botones deshabilitados a través de la clase bs 'disabled'. La respuesta de Balexand ( stackoverflow.com/a/19938049/1794871 ) funcionará mejor en ese caso. Gracias por señalar eso.
Gene Parcellano

66
En una aplicación angular bootstrap3, después de aplicar este estilo, ahora se puede hacer clic en el botón deshabilitado
Dimitri Kopriwa

3
Traté de usar esto en un ancla con la clase btn. Se veía con discapacidad y la información sobre herramientas trabajó, pero pude hacer clic en el enlace (no debería ser posible).
Olle Härstedt

26

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


1
Esta debería ser la respuesta correcta. No me parece hackey en absoluto :)
Starkers

55
Qué pesadilla para algo que debería hornearse :(
Devil's Advocate

1
Esto funciona bien, pero si sus posiciones de entrada cambian en función del tamaño de la ventana (como si los elementos de su formulario se ajustan / mueven) necesitará agregar algo de manejo en $ (ventana) .resize para mover el div de información sobre herramientas, o aparecerán en el lugar equivocado Recomiendo combinar con la respuesta de CMS desde aquí: stackoverflow.com/questions/2854407/…
knighter

6

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 () ).


6

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


6

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>

5

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/


1
Estoy buscando una solución con el botón deshabilitado.
Lorraine Bernard el

1
¡Basura de Adam Utter! Por supuesto, puede obtener información sobre herramientas en un botón deshabilitado.
Starkers

4

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

1
¡Trabajó! ¡Gracias!
Vedran Mandić

Me alegro de poder ayudar @ VedranMandić :)
Ben Smith

3

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.


Me encontré con algún problema al usar la destroyinformación sobre herramientas. (Ver esto ) Sin embargo, $("#element_id").tooltip('disable')y $("#element_id").tooltip('enable')trabaja para mí.
Sam Kah Chiin

2

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>

1
Eres brillante Una solución tan simple.
Brt

2

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


1
Gracias por la publicación, puedo creer que pasé por alto esta configuración.
Edd

1

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

1

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>

1

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.


0

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


0

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>


0

Finalmente resolví este problema, al menos con Safari, poniendo "pointer-events: auto" antes de "disabled". El orden inverso no funcionó.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.