Come abilitare la descrizione comandi Bootstrap sul pulsante disabilitato?

Devo visualizzare una descrizione comandi su un pulsante disabilitato e rimuoverla su un pulsante abilitato. Attualmente funziona al contrario.

Qual è il modo migliore per invertire questo 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>

Ecco una demo

PS: voglio mantenere l' disabledattributo.

Ecco un po 'di codice funzionante: 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");
    }
});

L'idea è di aggiungere la descrizione comando a un elemento padre con l' selectoropzione, quindi aggiungere / rimuovere l' relattributo quando si abilita / disabilita il pulsante.

Puoi avvolgere il pulsante disabilitato e posizionare la descrizione comando sul wrapper:

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

Se il wrapper ha, display:inlinela descrizione comandi non sembra funzionare. Usando display:blocke display:inline-blocksembra funzionare bene. Sembra anche funzionare bene con un involucro mobile.

AGGIORNAMENTO Ecco un JSFiddle aggiornato che funziona con l'ultimo Bootstrap (3.3.6). Grazie a @JohnLehmann per aver suggerito pointer-events: none;il pulsante disabilitato.

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

Questo può essere fatto tramite CSS. La proprietà "pointer-events" è ciò che impedisce la visualizzazione della descrizione comandi. È possibile ottenere pulsanti disabilitati per visualizzare la descrizione comandi sovrascrivendo la proprietà "pointer-events" impostata da bootstrap.

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

Se sei disperato (come lo ero io) per suggerimenti su caselle di controllo, caselle di testo e simili, ecco la mia soluzione alternativa:

$('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;
});

Esempi di lavoro: http://jsfiddle.net/WB6bM/11/

Per quanto valga la pena, credo che i tooltip sugli elementi del modulo disabilitati siano molto importanti per l'UX. Se stai impedendo a qualcuno di fare qualcosa, dovresti dirgli perché.

Queste soluzioni alternative sono brutte. Il debug del problema è che bootstrap imposta automaticamente eventi-puntatore proprietà CSS : nessuno su elementi disabilitati.

Questa proprietà magica fa sì che JS non sia in grado di gestire alcun evento sugli elementi che corrispondono al selettore CSS.

Se sovrascrivi questa proprietà su quella predefinita, tutto funziona come un incantesimo, compresi i suggerimenti!

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

Tuttavia non dovresti usare un selettore così generale, perché probabilmente dovrai interrompere manualmente la propagazione degli eventi JavaScript come sai ( e.preventDefault () ).

Nel mio caso, nessuna delle soluzioni di cui sopra ha funzionato. Ho scoperto che è più semplice sovrapporre il pulsante disabilitato utilizzando un elemento assoluto come:

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

dimostrazione

Prova questo esempio:

Le descrizioni comandi devono essere inizializzate con jQuery: selezionare l'elemento specificato e chiamare il tooltip()metodo in JavaScript:

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

Aggiungi CSS:

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

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

E il tuo html:

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

Non è possibile visualizzare la descrizione comandi su un pulsante disabilitato. Questo perché gli elementi disabilitati non attivano alcun evento, incluso il suggerimento. La soluzione migliore sarebbe falsificare il pulsante disabilitato (in modo che appaia e si comporti come disabilitato), in modo da poter attivare la descrizione comandi.

Per esempio. Javascript:

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

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

Invece di 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/

Puoi semplicemente sostituire lo stile "puntatore-eventi" di Bootstrap per i pulsanti disabilitati tramite CSS, ad es

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

Meglio essere espliciti e disabilitare pulsanti specifici, ad es

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

Questo è ciò che mi sono inventato io e tekromancr.

Elemento di esempio:

<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: gli attributi del tooltip possono essere aggiunti a un div separato, in cui l'id di quel div deve essere usato quando si chiama .tooltip ('destroy'); o .tooltip ();

questo abilita il tooltip, inseriscilo in qualsiasi javascript incluso nel file html. questa linea potrebbe non essere necessaria per aggiungere, tuttavia. (se la descrizione mostra senza questa linea, non preoccuparti di includerla)

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

distrugge il tooltip, vedi sotto per l'uso.

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

impedisce al pulsante di essere cliccabile. poiché l'attributo disabilitato non viene utilizzato, questo è necessario, altrimenti il ​​pulsante sarebbe comunque selezionabile anche se "sembra" come se fosse disabilitato.

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

Utilizzando bootstrap, le classi btn e btn-disabled sono disponibili per te. Sostituisci questi nel tuo file .css. puoi aggiungere qualsiasi colore o qualunque cosa desideri che il pulsante appaia quando disabilitato. Assicurati di mantenere il cursore: impostazione predefinita; puoi anche cambiare l'aspetto di .btn.btn-success.

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

aggiungi il codice qui sotto a qualunque javascript controlli il pulsante che viene abilitato.

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

tooltip ora dovrebbe mostrare solo quando il pulsante è disabilitato.

se stai usando angularjs ho anche una soluzione per questo, se lo desideri.

Se aiuta qualcuno, sono stato in grado di ottenere un pulsante disabilitato per mostrare una descrizione comandi semplicemente inserendo un intervallo al suo interno e applicando la roba della descrizione comandi, angularjs attorno ad esso ...

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

Basato su Bootstrap 4

Elementi disabilitati Gli elementi con l'attributo disabilitato non sono interattivi, il che significa che gli utenti non possono mettere a fuoco, passare con il mouse o fare clic su di essi per attivare una descrizione comandi (o popover). Per ovviare al problema, ti consigliamo di attivare la descrizione comando da un wrapper o, idealmente reso focalizzabile da tastiera usando tabindex = "0", e sovrascrivere gli eventi puntatore sull'elemento disabilitato.

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

Tutti i dettagli qui: Bootstrap 4 doc

Codice di lavoro per 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;
}

Puoi imitare l'effetto usando CSS3.

Basta togliere lo stato disabilitato dal pulsante e il tooltip non appare più .. questo è ottimo per la validazione in quanto il codice richiede meno logica.

Ho scritto questa penna per illustrare.

Descrizioni comandi disabilitate 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>

Aggiungi semplicemente la classe disabilitata al pulsante invece dell'attributo disabilitato per renderla visibilmente disabilitata.

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

Nota: questo pulsante sembra essere disabilitato, ma innesca ancora eventi e devi solo essere consapevole di ciò.

pointer-events: auto; non funziona su un <input type="text" /> .

Ho adottato un approccio diverso. Non disabilito il campo di input, ma lo faccio funzionare come disabilitato tramite CSS e JavaScript.

Poiché il campo di input non è disabilitato, la descrizione comandi viene visualizzata correttamente. Nel mio caso era più semplice dell'aggiunta di un wrapper nel caso in cui il campo di input fosse disabilitato.

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

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

Alla fine ho risolto questo problema, almeno con Safari, inserendo "pointer-events: auto" prima di "disabilitato". L'ordine inverso non ha funzionato.