Jak włączyć etykietkę bootstrap na wyłączonym przycisku?

Question

Potrzebuję wyświetlić etykietkę narzędzia na wyłączonym przycisku i usunąć go z włączonego przycisku. W rzeczywistości działa w odwrotny sposób.

Jaki jest najlepszy sposób na odwrócenie tego zachowania?

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

Oto demo: http://jsfiddle.net/BA4zM/68/

P.S .: Chcę zachować atrybut wyłączony.

Answer 1

Oto kod roboczych: 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"); 
    } 
}); 

Chodzi o to, aby dodać podpowiedź do elementu nadrzędnego za pomocą opcji selector, a następnie dodać/usunąć atrybut rel podczas włączania/wyłączania przycisku.

Answer 2

Nie można wyświetlić wskazówki narzędzia na wyłączonym przycisku. Wynika to z faktu, że wyłączone elementy nie powodują żadnych zdarzeń, w tym wskazówkę narzędzia. Najlepszym wyjściem byłoby sfałszowanie wyłączonego przycisku (tak, aby wyglądało i działało jak wyłączone), aby można było uruchomić końcówkę narzędzia.

Np. Javascript:

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

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

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

Answer 3

Jeśli jesteś zdesperowany (jak byłem) dla podpowiedzi dotyczących wyboru, pola tekstowe i tym podobne, to tutaj jest mój hackey obejście:

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

przykłady pracy: http://jsfiddle.net/WB6bM/11/

Na co jej wartości , Wierzę, że tooltipy na wyłączonych elementach formularza są bardzo ważne dla UX. Jeśli uniemożliwiasz komuś coś zrobić, powinieneś powiedzieć im, dlaczego.

Answer 4

Można owinąć przycisk niepełnosprawnej i umieścić etykietkę na opakowaniu:

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

Jeżeli owijka ma display:inline wtedy etykietka nie wydają się działać. Wydaje się, że używanie display:block i display:inline-block działa dobrze. Wydaje się również działać dobrze z pływającym opakowaniem.

AKTUALIZACJA Oto zaktualizowany JSFiddle, który działa z najnowszym Bootstrap (3.3.6). Dzięki @JohnLehmann za zasugerowanie pointer-events: none; dla wyłączonego przycisku.

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

Answer 5

Można to zrobić za pomocą CSS. Właściwość "wskaźnik-zdarzenia" zapobiega wyświetlaniu podpowiedzi.Możesz uzyskać wyłączone przyciski, aby wyświetlić etykietkę narzędzia, zastępując właściwość "wskaźnik-zdarzenia" ustawioną przez bootstrap.

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

Answer 6

Oto, co wymyśliłem sobie i tekromancr.

Przykład elementu:

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

uwaga: cechy etykietka może być dodany do oddzielnego div, w którym identyfikator tego div ma być stosowany przy wywołaniu .tooltip („zniszczenie”); lub .tooltip();

włącza to podpowiedź, umieszcza ją w dowolnym javascript zawartym w pliku HTML. ten wiersz może jednak nie być konieczny do dodania. (Opis wskazuje, że w/o tej linii to nie przeszkadza w tym go)

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

niszczy podpowiedź patrz poniżej zastosowania.

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

zapobiega kliknięciu przycisku. ponieważ atrybut disabled nie jest używany, jest to konieczne, w przeciwnym razie przycisk będzie nadal klikalny, nawet jeśli "wygląda" tak, jakby był wyłączony.

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

Przy użyciu funkcji bootstrap dostępne są klasy btn i btn-disabled. Zastąp je w swoim pliku .css. możesz dodać dowolne kolory lub jakikolwiek przycisk, który ma wyglądać po wyłączeniu. Upewnij się, że trzymasz kursor: domyślny; możesz także zmienić wygląd .btn.btn-success.

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

dodać poniższy kod do cokolwiek javascript kontroluje przycisk staje się włączony.

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

Etykietka narzędziowa powinna teraz wyświetlać się tylko wtedy, gdy przycisk jest wyłączony.

jeśli używasz angularów, również mam na to rozwiązanie, jeśli chcesz.

Answer 7

Te obejścia są brzydkie. Mam debugowane problem jest to, że bootstrap automatycznie ustawić właściwość CSS pointer-events: none na wyłączone elementy.

Ta magiczna właściwość powoduje, że JS nie jest w stanie obsłużyć żadnego zdarzenia na elementach pasujących do selektora CSS.

Jeśli zastąpisz tę właściwość domyślną, wszystko działa jak zaklęcie, w tym podpowiedzi!

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

Jednak nie powinno się używać tak ogólne selektor, bo prawdopodobnie będziesz musiał ręcznie zatrzymać JavaScript propagacji wydarzenie sposób wiesz (e.preventDefault()).

Answer 8

Można po prostu zastąpić styl "zdarzeń wskaźnikowych" w Bootstrap dla wyłączonych przycisków za pomocą CSS, np.

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

Lepiej nadal jawnie i wyłącz konkretne przyciski, np.

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

Answer 9

kod Praca dla 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; 
} 

Answer 10

pointer-events: auto; nie działa na <input type="text" />.

Podjęłam inne podejście. Nie wyłączam pola wejściowego, ale sprawię, że będzie działał jako wyłączony przez css i javascript.

Ponieważ pole wejściowe nie jest wyłączone, etykieta narzędzia jest wyświetlana prawidłowo. W moim przypadku było to prostsze niż dodanie opakowania w przypadku, gdyby pole wejściowe było wyłączone.

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

Answer 11

W moim przypadku, żaden z powyższych rozwiązań nie sprawdziło. Okazało się, że łatwiej jest pokrywać przycisk wyłączoną stosując bezwzględną elementu jako:

<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

Answer 12

Spróbuj przykład:

podpowiedzi muszą być inicjowane z jQuery: wybierz określony element i wywołać tooltip() metoda JavaScript:

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

Dodaj CSS:

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

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

A twój html:

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

Answer 13

można naśladować efekt za pomocą CSS3.

Po prostu wyłącz stan wyłączony z przycisku i etykieta narzędzia nie pojawia się więcej. Jest to przydatne do sprawdzania poprawności, ponieważ kod wymaga mniejszej logiki.

Napisałem to pióro, aby zilustrować.

CSS3 Disabled Tooltips

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