Muszę wyświetlić podpowiedź na wyłączonym przycisku i usunąć ją z włączonego przycisku. Obecnie działa odwrotnie.
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
PS: Chcę zachować disabled
atrybut.
javascript
jquery
html
twitter-bootstrap
twitter-bootstrap-tooltip
Lorraine Bernard
źródło
źródło
Odpowiedzi:
Oto działający kod: http://jsfiddle.net/mihaifm/W7XNU/200/
Chodzi o to, aby dodać podpowiedź do elementu nadrzędnego z
selector
opcją, a następnie dodać / usunąćrel
atrybut podczas włączania / wyłączania przycisku.źródło
Możesz zawinąć wyłączony przycisk i umieścić etykietkę na opakowaniu:
Jeśli opakowanie ma,
display:inline
to podpowiedź nie działa. Używaniedisplay:block
idisplay:inline-block
wydaje się działać dobrze. Wydaje się również, że działa dobrze z pływającą owijką.UPDATE Oto zaktualizowany JSFiddle, który współpracuje z najnowszym Bootstrapem (3.3.6). Podziękowania dla @JohnLehmann za sugestię
pointer-events: none;
dotyczącą wyłączonego przycisku.http://jsfiddle.net/cSSUA/209/
źródło
btn-group
s?Można to zrobić za pomocą CSS. Właściwość „pointer-events” zapobiega wyświetlaniu podpowiedzi. Możesz wyłączyć przyciski do wyświetlania podpowiedzi, nadpisując właściwość „pointer-events” ustawioną przez bootstrap.
źródło
[disabled]
przyciskach. Nie patrz także Bootstrap (2.3.2) przypisujący zdarzenia wskaźnika w dowolnym miejscu w źródle.Jeśli desperacko (tak jak ja) szukasz podpowiedzi do pól wyboru, pól tekstowych i tym podobnych, oto moje hackey obejście:
Przykłady robocze: http://jsfiddle.net/WB6bM/11/
Biorąc pod uwagę jego wartość, uważam, że podpowiedzi dotyczące wyłączonych elementów formularza są bardzo ważne dla UX. Jeśli powstrzymujesz kogoś przed zrobieniem czegoś, powinieneś powiedzieć mu dlaczego.
źródło
Te obejścia są brzydkie. Problem polega na tym, że bootstrap automatycznie ustawia właściwość CSS pointer-events: none na wyłączonych elementach.
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 nadpiszesz tę właściwość na domyślną, wszystko będzie działać jak urok, łącznie z podpowiedziami!
Nie powinieneś jednak używać tak ogólnego selektora, ponieważ prawdopodobnie będziesz musiał ręcznie zatrzymać propagację zdarzeń JavaScript w znany Ci sposób ( e.preventDefault () ).
źródło
W moim przypadku żadne z powyższych rozwiązań nie zadziałało. Zauważyłem, że łatwiej jest nałożyć wyłączony przycisk za pomocą elementu absolutnego, takiego jak:
Próbny
źródło
Nie możesz wyświetlić podpowiedzi na wyłączonym przycisku. Dzieje się tak, ponieważ wyłączone elementy nie wyzwalają żadnych zdarzeń, w tym podpowiedzi. Najlepszym rozwiązaniem byłoby sfałszowanie wyłączenia przycisku (tak, aby wyglądał i zachowywał się jak wyłączony), aby można było uruchomić podpowiedź.
Na przykład. JavaScript:
Zamiast po prostu
$('[rel=tooltip]').tooltip();
HTML:
JSFiddle: http://jsfiddle.net/BA4zM/75/
źródło
Wypróbuj ten przykład:
Etykietki narzędzi należy zainicjować za pomocą
jQuery
: wybierz określony element i wywołajtooltip()
metodę wJavaScript
:Dodaj
CSS
:A twój html:
źródło
Możesz po prostu nadpisać styl „pointer-events” Bootstrapa dla wyłączonych przycisków za pomocą CSS, np
Lepiej nadal być wyraźnym i wyłączać określone przyciski, np
źródło
Oto, co wymyśliłem ja i technik.
Przykładowy element:
uwaga: atrybuty podpowiedzi można dodać do oddzielnego elementu div, w którym jego identyfikator będzie używany podczas wywoływania .tooltip ('zniszcz'); lub .tooltip ();
włącza to podpowiedź, umieść ją w dowolnym skrypcie javascript zawartym w pliku html. dodanie tej linii może jednak nie być konieczne. (jeśli podpowiedź pokazuje bez tej linii, nie przejmuj się tym)
niszczy podpowiedź, zobacz poniżej do użycia.
zapobiega klikaniu przycisku. ponieważ atrybut disabled nie jest używany, jest to konieczne, w przeciwnym razie przycisk nadal byłby klikalny, mimo że „wygląda” tak, jakby był wyłączony.
Używając bootstrap, dostępne są klasy btn i btn-disabled. Zastąp je we własnym pliku .css. możesz dodać dowolne kolory lub cokolwiek chcesz, aby przycisk wyglądał po wyłączeniu. Upewnij się, że trzymasz kursor: default; możesz także zmienić wygląd .btn.btn-success.
dodaj poniższy kod do tego, co javascript kontroluje włączanie przycisku.
podpowiedź powinna teraz wyświetlać się tylko wtedy, gdy przycisk jest wyłączony.
jeśli używasz angularjs, mam również na to rozwiązanie, jeśli chcesz.
źródło
destroy
z podpowiedzi. (Zobacz to ) Jednak$("#element_id").tooltip('disable')
i$("#element_id").tooltip('enable')
pracuj dla mnie.Jeśli to komuś pomogło, udało mi się uzyskać wyłączony przycisk, aby wyświetlić podpowiedź, po prostu umieszczając w nim rozpiętość i stosując tam elementy podpowiedzi, wokół niego angularjs ...
źródło
Oparty na Bootstrap 4
Wszystkie szczegóły tutaj: Bootstrap 4 doc
źródło
Działający kod dla Bootstrap 3.3.6
JavaScript:
CSS:
źródło
Możesz naśladować efekt za pomocą CSS3.
Po prostu zdejmij stan wyłączony z przycisku, a podpowiedź nie będzie się już pojawiać. Jest to świetne do weryfikacji, ponieważ kod wymaga mniej logiki.
Napisałem to pióro, aby zilustrować.
CSS3 wyłączone podpowiedzi
źródło
Po prostu dodaj klasę disabled do przycisku zamiast do atrybutu disabled, aby zamiast tego była widocznie wyłączona.
Uwaga: ten przycisk tylko wydaje się być wyłączony, ale nadal wyzwala zdarzenia i po prostu musisz o tym pamiętać.
źródło
pointer-events: auto;
nie działa na<input type="text" />
.Przyjąłem inne podejście. Nie wyłączam pola wejściowego, ale sprawiam, że działa jako wyłączone przez css i javascript.
Ponieważ pole wejściowe nie jest wyłączone, podpowiedź jest wyświetlana poprawnie. W moim przypadku było to o wiele prostsze niż dodanie wrappera na wypadek, gdyby pole wejściowe było wyłączone.
źródło
Dla Bootstrap 3
HTML
CSS
JS
źródło
W końcu rozwiązałem ten problem, przynajmniej w Safari, umieszczając „pointer-events: auto” przed „disabled”. Odwrotna kolejność nie zadziałała.
źródło