Mała podpowiedź wyświetlana przy ikonie potrafi znacząco poprawić zrozumienie interfejsu, ale tylko wtedy, gdy pojawia się we właściwym momencie i nie zastępuje ważnych informacji. W tym artykule pokazuję, jak używać komponentu Tooltip z Material UI w aplikacjach React, jak ustawiać jego położenie, opóźnienia i wygląd oraz jak uniknąć problemów z dostępnością i elementami wyłączonymi.
Najważniejsze zasady używania podpowiedzi w MUI
- Tooltip służy do krótkich objaśnień, a nie do przechowywania całej instrukcji.
- Podstawowa implementacja wymaga elementu potomnego, który może przyjąć ref i obsłużyć zdarzenia.
- Prop describeChild stosuj wtedy, gdy element ma już własną widoczną etykietę.
- Dla przycisków disabled potrzebny jest zwykle element opakowujący, na przykład
span. - Opóźnienie otwierania, położenie i wariant interaktywny można dopasować do konkretnego interfejsu.
Mui Tooltip w praktyce aplikacji React
Komponent Tooltip wyświetla krótką informację po najechaniu kursorem, uzyskaniu fokusu albo wykonaniu gestu dotyku. Najczęściej używam go przy ikonach, skróconych etykietach, przyciskach bez tekstu i elementach, których działanie nie jest oczywiste na pierwszy rzut oka.
Instalacja nie wymaga dodatkowej paczki poza Material UI. Komponent można importować bezpośrednio z modułu @mui/material albo z konkretnej ścieżki, co bywa korzystne przy optymalizacji rozmiaru bundla.
import Tooltip from '@mui/material/Tooltip';
import IconButton from '@mui/material/IconButton';
import DeleteIcon from '@mui/icons-material/Delete';
export default function DeleteButton() {
return (
);
}W tym przykładzie tekst title opisuje funkcję przycisku, a aria-label zapewnia nazwę dostępną dla czytników ekranu. To rozdzielenie jest ważne, ponieważ podpowiedź nie powinna być jedynym źródłem informacji o podstawowej funkcji kontrolki.
Co może być elementem potomnym
Dziecko komponentu musi przyjąć przekazywane właściwości i referencję DOM. Standardowe komponenty MUI, takie jak Button, IconButton czy Chip, zazwyczaj spełniają ten warunek. Przy własnym komponencie trzeba pamiętać o przekazaniu propsów i refa do rzeczywistego elementu HTML.
const ActionButton = React.forwardRef(function ActionButton(props, ref) {
return ;
});
Zapisz
To jeden z problemów, które często wyglądają jak błąd samego MUI. Podpowiedź się nie pojawia, bo własny komponent nie przekazał zdarzeń albo referencji dalej. W praktyce właśnie ten szczegół sprawdzam jako pierwszy.
Jak ustawić wyzwalanie, położenie i opóźnienia
Domyślnie podpowiedź reaguje na najechanie kursorem, fokus klawiaturą i dotyk. Możesz wyłączyć wybrane mechanizmy za pomocą disableHoverListener, disableFocusListener oraz disableTouchListener, choć zwykle lepiej ograniczać tę konfigurację tylko do uzasadnionych przypadków.
Położenie określa prop placement. Dostępne są warianty top, bottom, left i right, a także ich odmiany -start i -end. Jeżeli podpowiedź ma wskazywać konkretny element, dobrym dodatkiem jest arrow.
}>
Eksportuj
Opóźnienie otwarcia ustawia enterDelay w milisekundach. Domyślne 100 ms sprawdza się przy pojedynczych kontrolkach, ale przy gęstej tabeli lub pasku ikon często lepsze jest nieco dłuższe opóźnienie, na przykład 300 ms. Dla dotyku osobno działa enterTouchDelay, którego domyślna wartość wynosi 700 ms.
Podpowiedź podążająca za kursorem
W nietypowych interfejsach można użyć followCursor. Przydaje się na przykład przy objaśnianiu fragmentu wykresu albo dużego obszaru roboczego, jednak przy zwykłych przyciskach zwykle pogarsza czytelność.
Jeżeli tekst ma być dostępny po kliknięciu, a nie tylko po najechaniu, sam Tooltip może być niewłaściwym wyborem. W takim przypadku lepiej rozważyć Popover, menu lub stały element opisowy, ponieważ użytkownik powinien mieć czas na przeczytanie i ewentualną interakcję.
Dostępność decyduje o poprawnej implementacji
Tooltip może pełnić funkcję etykiety albo dodatkowego opisu. Domyślnie właściwość title służy jako nazwa dostępna elementu. Prop describeChild zmienia zachowanie tak, aby tekst był dodatkowym opisem kontrolki, która ma już własną etykietę.
Nie używam describeChild, gdy podpowiedź jest jedyną nazwą ikony. W takim przypadku element może stracić zrozumiałą nazwę dla technologii asystujących. Dla ikony bez tekstu stosuję przede wszystkim aria-label, a Tooltip traktuję jako wizualne uzupełnienie.
Elementy disabled
Wyłączony natywny przycisk nie emituje standardowych zdarzeń myszy, dlatego opakowanie go bezpośrednio w Tooltip często nie zadziała. Najbezpieczniejszy wzorzec to użycie elementu span jako aktywnego celu dla podpowiedzi.
Przy zwykłym elemencie HTML, takim jak button, może być potrzebne ustawienie pointer-events: none w stanie disabled, aby zdarzenia przejął wrapper. Trzeba też zadbać o styl wyświetlania opakowania, ponieważ w Safari element poniżej wrappera powinien być blokiem albo elementem flex.
Interaktywność i czas zamykania
Tooltip w MUI jest interaktywny domyślnie, więc użytkownik może przejść kursorem nad samą podpowiedź, zanim zniknie. To pomaga spełnić wymagania dotyczące treści pojawiających się po najechaniu. Ustawienie disableInteractive upraszcza zachowanie, ale może utrudnić odczytanie dłuższego komunikatu.
Nie wkładam do Tooltipa formularzy, wielu przycisków ani długich instrukcji. Jeśli użytkownik ma wejść w interakcję z treścią, wybieram komponent przeznaczony do tego celu i nie zmuszam podpowiedzi do roli małego okna dialogowego.
Stylowanie i dopasowanie do własnego interfejsu
Najprostsze zmiany wyglądu można wykonać przez sx lub właściwości slotów. MUI korzysta między innymi ze slotu tooltip, który odpowiada za właściwą powierzchnię z tekstem, oraz slotu popper, odpowiedzialnego za pozycjonowanie.
Przy większym projekcie lepiej ustalić wspólne wartości w motywie niż stylować każdą podpowiedź osobno. Dzięki temu zmiana koloru, promienia zaokrąglenia czy maksymalnej szerokości obejmuje cały produkt.
const theme = createTheme({
components: {
MuiTooltip: {
defaultProps: {
arrow: true,
enterDelay: 200,
},
styleOverrides: {
tooltip: {
fontSize: '0.8125rem',
maxWidth: 280,
},
},
},
},
});Domyślna szerokość dobrze radzi sobie z krótkimi komunikatami. Przy dłuższym tekście sprawdzam jednak ręcznie, czy podpowiedź nie zasłania formularza, tabeli albo istotnego fragmentu ekranu. Estetyczny Tooltip, który utrudnia wykonanie zadania, nadal jest złym rozwiązaniem.
Tooltip, Popover czy zwykły opis
Najwięcej nieporozumień wynika z używania Tooltipa do treści, która powinna być stale widoczna. Ja podejmuję decyzję na podstawie roli komunikatu, długości tekstu i tego, czy użytkownik musi wejść w interakcję z jego zawartością.
| Rozwiązanie | Kiedy użyć | Najważniejsze ograniczenie |
|---|---|---|
| Tooltip | Krótka podpowiedź przy ikonie, skrócie lub funkcji | Nie powinien zawierać kluczowych instrukcji ani długiego tekstu |
| Popover | Większa treść, dodatkowe opcje lub interakcja | Wymaga lepszego zarządzania fokusem i zamykaniem |
| Stały opis | Informacja potrzebna przed wykonaniem zadania | Zajmuje miejsce w układzie interfejsu |
Przykładowo opis kryteriów hasła przy polu rejestracji powinien być widoczny bez najeżdżania. Z kolei wyjaśnienie znaczenia ikony sortowania dobrze pasuje do Tooltipa. Taki podział poprawia nie tylko dostępność, ale też przewidywalność interfejsu.
Typowe błędy, które psują działanie podpowiedzi
Brak refa w komponencie własnym
Jeżeli Tooltip nie reaguje na hover ani fokus, sprawdź, czy komponent potomny przekazuje ref i propsy do DOM. To częstsza przyczyna niż problem z położeniem albo stylem.
Zbyt dużo informacji w jednym miejscu
Tooltip powinien mieścić się w krótkim komunikacie. Gdy tekst przekracza kilka zdań, użytkownik może nie zdążyć go przeczytać albo stracić kontekst po przesunięciu kursora. Wtedy lepszy będzie stały opis lub Popover.
Powielanie widocznej etykiety
Jeśli przycisk ma już tekst „Zapisz”, podpowiedź „Zapisz” niewiele wnosi. Lepszy będzie komunikat uzupełniający, na przykład „Zapisuje zmiany bez opuszczania formularza”. Krótki Tooltip powinien dodawać informację, a nie tylko powtarzać interfejs.
Ukrywanie krytycznych komunikatów
Błąd walidacji, informacja o wymaganym polu czy powód zablokowania procesu nie powinny być dostępne wyłącznie po najechaniu. Takie treści muszą działać również dla klawiatury, urządzeń dotykowych i czytników ekranu.
Przeczytaj również: Nagłówek H2 w HTML - jak budować dobrą hierarchię?
Brak testu na małym ekranie
Na urządzeniu mobilnym nie ma klasycznego hovera, a podpowiedź może pojawić się dopiero po dłuższym przytrzymaniu. Dlatego sprawdzam każdy ważniejszy Tooltip przy użyciu klawiatury, dotyku i powiększenia strony. Sam test kursorem na desktopie daje zbyt mało informacji.
Jak wykorzystać Tooltip bez pogarszania doświadczenia użytkownika
Najlepiej traktować ten komponent jak dyskretne wsparcie, a nie główny kanał komunikacji. Krótki tekst, logiczne położenie, poprawna nazwa dostępna i sensowne zachowanie na dotyku robią większą różnicę niż rozbudowane efekty wizualne.
Przed wdrożeniem sprawdzam cztery rzeczy: czy użytkownik rozumie element bez podpowiedzi, czy komunikat jest naprawdę potrzebny, czy da się go odczytać klawiaturą oraz czy element nie powinien być opisany na stałe. Jeśli odpowiedź na ostatnie pytanie brzmi „tak”, rezygnuję z Tooltipa bez żalu.
W dobrze zaprojektowanej aplikacji podpowiedź pojawia się tylko wtedy, gdy pomaga podjąć decyzję lub zrozumieć funkcję. Właśnie ta powściągliwość sprawia, że komponent MUI pozostaje użyteczny zamiast zamieniać interfejs w labirynt wyskakujących komunikatów.
