Pojemnik na podpowiedzi tooltip, manipulacje polożenia strzałki

pytanie zadane 27 lipca 2017 w HTML i CSS przez kevin Mądrala (5,010 p.)

Witam!

Czy takie podejście do wyskakujących podpowiedzi jest dobre ?

https://jsfiddle.net/adriansikora344/d1pu8xzL/

Robię sobie pojemnik który zawiera input oraz span w którym jest podpowiedź. span ponieważ służy on do elementów które znajdują się w jednej linii a podpowiedź chcę mieć z prawej strony. Pojemnik czyli tooltip-container posiada parametr relative ponieważ jest odniesieniem dla pozycji elementów w środku z parametrem absolute czyli dla span'a ponieważ musi on przykrywać elementy. Nie rozumiem tylko czemu ten pojemnik musi mieć atrybut display: inline-block bez tego podpowiedź mi się nie wyświetlała dodałem owy atrybut z jednego kursu ale nie rozumiem po co on tutaj jest skoro span w którym jest tooltip jest w środku pojemnika, input i span dziedziczą ten atrybut ?

Strzałka w podpowiedzi

Jeżeli podpowiedz mieści się w jednej linijce to strzałka znajduje się w odpowiedniej pozycji. Ale gdy tekst w podpowiedzi jest znacznie dłuższy to strzałka się przesuwa w dół tak jak widać na drugim inpucie. Spowodowane jest to tym że pozycja top: 50%; liczona jest w stosunku do span'a a nie do pojemnika tooltip-container pytanie jak to zmienić aby strzałka zawsze znajdowała się na wysokości input'a ?

1 odpowiedź

odpowiedź 27 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

Osobiście dla .tooltiptext dałbym:

top: 50%;
transform: translateY(-50%);

może zadowoli Cię takie rozwiązanie.

komentarz 27 lipca 2017 przez kevin Mądrala (5,010 p.)

A miałem się jeszcze o to zapytać :)

Dodając pytanie, to w form do każdego input'a musi być label, ale to musi znaczy koniecznie musi ? Nie chcę mieć nad czy obok input'a tekstu z oznaczeniem tylko wole to umieścić w placeholder. Czy skoro tak bardzo musi być ten label to mogę w nim tylko wyświetlać błędy jako tooltip zamiast tego span'a ?

komentarz 27 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

Pola formularza muszą posiadać etykiety, ale można je ukryć klasą visuallyhidden

komentarz 27 lipca 2017 przez kevin Mądrala (5,010 p.)

Czemu ? Jeżeli pole opisuje adres e-mail to etykieta ( label ) zawiera tylko tekst e-mail ? A w przypadku walidacji zmieniam etykietę na "Błędny adres e-mail" czy wystarczy mi taki span ?

komentarz 27 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

Bo etykieta opisuje pole formularza a placeholder nie zastępuje Label. Co do komunikatow - http://internet-bez-barier.com/dostepne-formularze-czesc-2-komunikaty-o-bledach/

komentarz 27 lipca 2017 przez kevin Mądrala (5,010 p.)

Dobra, czyli studiując Twój link dochodzę do wniosku że komunikat o błędzie nie musi być umieszczony w label, może być w akapicie, ważne jest żeby był on jasno i wyraźnie skojarzony z odpowiednim inputem. Napisałem kod uwzględniając to i proszę o komentarze odnośnie jego ponieważ jest to dla mnie nowość...

https://jsfiddle.net/adriansikora344/hk4qascg/

co do aria-atomic określa dane które zmieniane są dynamicznie np. poprzez AJAX ale czy tutaj jest dobre użycie tego ? Mogę przeprowadzać walidacje za pomocą JavaScript. Dla przykładu, jeżeli zostanie podane złe hasło to nastąpi edycja pola poprzez usunięcie hasła i wyświetlenie komunikatu.

Jest jeszcze taka jedna sprawa, jeżeli aktualnie nie ma żadnego błędu w polu to na stronie może znajdować się ukryty kod HTML z treścią błędu ? Czy należy dodawać taki tekst/akapit dynamicznie ?

komentarz 27 lipca 2017 przez xmentor Nałogowiec (49,520 p.)

<input type="text" name="" value="" placeholder="email" id="email" required aria-required="true" aria-describedby="email-error-tooltip">

<a class="tooltiptext" id="email-error-tooltip">Zły email</a>

Czytnik odczyta od razu, że haslo/e-mail jest zły, gdy input zostanie sfokusowany(chyba nie o taki efekt Ci chodziło). Dodatkowo również po najechaniu kursorem na pole wyświetla tooltip z błędem.

co do aria-atomic określa dane które zmieniane są dynamicznie np. poprzez AJAX ale czy tutaj jest dobre użycie tego ?

aria-live określa, który element ma być traktowany jako 'żywy' i po dodaniu do niego czegokolwiek powiadomi o tym użytkownika. Natomiast aria-atomic=true powoduje, że cały element jest traktowany jako 'żywy(ale to chyba dotyczy Vocieovera) - trochę masło maślane.

Jest jeszcze taka jedna sprawa, jeżeli aktualnie nie ma żadnego błędu w polu to na stronie może znajdować się ukryty kod HTML z treścią błędu ? Czy należy dodawać taki tekst/akapit dynamicznie ?

Można tak i tak, ale trzeba zadbać o to, by czytnik odczytał błąd, gdy wprowadzone dane są błędne.