Tworzymy bardzo prosty tooltip w CSS

Tworzymy bardzo prosty tooltip w CSS

Dziś coś bardzo praktycznego. Dla czytelników bloga, przygotowałem demo pokazujące jak najprościej stworzyć tzw. tooltip, czyli dymek z objaśnieniem. Jak się okazuje, nie potrzebujemy do tego instalować gotowych wtyczek czy zaśmiecać strony dodatkowym HTML-em. Wykorzystamy „data-attribute” i możliwości nowego CSS3.

Jak to działa?

Zasada działania jest bardzo prosta: wszystkie elementy z atrybutem „tooltip” będą zawierały pseudoelementy ::before oraz ::after. Pierwszy z nich posłuży do wyświetlenia tekstu, natomiast drugi wykorzystamy jako strzałkę. Zacznijmy od przygotowania przykładowego tekstu i kodu HTML, w którym dodamy nasz tooltip:

Prosty tooltip CSS

Sprawdź jak łatwo w samym CSS stowrzyć animowany tooltip. Zasada działania jest bardzo prosta. Wszystkie elementy z atrybutem [data-tooltip], otrzymują ::before - do wyświetlania tesktu oraz ::after - strzałeczka.

Użycie JavaScript jest opcjonalne i niewymagane w przypadku krótkich "dymków". Chcąc wyświetlać długie teksty, musimy mieć możliwość ograniczenia szerokości i włączenia zawijania wierszy.

Jak widzisz, w moim przypadku każdy z odnośników posiada atrybut data-tooltip=”jakiś tekst”. Element „a” możesz zastąpić każdym innym znacznikiem HTML – zgodnie z jego przeznaczeniem.

Style

Mając tak przygotowany widok możemy przejść do najważniejszej rzeczy: stylowania. Zdefiniujmy styl dla elementów posiadających atrybut tooltip:

[data-tooltip]{
  position: relative;
  color: red;
  text-decoration: none;
  &:before {
  }
  &:after {
  }
}

Aby wyświetlić tekst zawarty w atrybucie, wykorzystajmy ::before oraz możliwość jaką daje nam content: attr(). Poza standardowymi stylami jak wielkość czcionki, pozycja czy sposób animacji, wykorzystamy również „white-space”. Wartość ustawiona na „nowrap”, uniemożliwia zawijanie testu i jednocześnie pozwala dostosowywać automatycznie szerokość dymka do jego zawartości.

[data-tooltip]{
  &:before {
    position: absolute;
    z-index: 2;
    bottom: 100%;
    left: 50%;
    padding: 0.5em 1em;
    white-space: nowrap;
    content: attr(data-tooltip);
    color: white;
    font-size: 0.8em;
    line-height: 1.7em;
    background-color: red;
    opacity: 0;
    transform: translate(-50%,0);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    transition: transform 0.2s ease-out;
    pointer-events: none;
  }
}

Nie ma tooltipa bez „strzałeczki” – dodajmy więc ::after w postaci obróconego o 45° kwadratu.

[data-tooltip]{
  &:after {
    position: absolute;
    z-index: 3;
    display: block;
    bottom: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-bottom: -4px;
    content: '';
    background-color: red;
    opacity: 0;
    transform: translate(-50%,0) rotate(45deg);
    transition: transform 0.2s ease-out;
    pointer-events: none;
  }
}

Teraz należy obsłużyć moment i sposób pojawiania się. Wykorzystajmy do tego stany :hover i :focus.

[data-tooltip]{
  &:hover,
  &:focus {
    &:before {
      opacity: 1;
      transform: translate(-50%,-10px);
    }
    &:after {
      opacity: 1;
      transform: translate(-50%,-10px) rotate(45deg);
    }
  }
}

Łamanie tekstu

Tu zasadniczo mógłby się skończyć ten tutorial lecz dla chętnych mam coś jeszcze. Na chwilę obecną, tooltip wyświetla cały tekst w jednym wierszu ponieważ użyliśmy atrybutu white-space: nowrap. Co się jednak stanie, gdy tekst będzie na tyle długi, że wyjdzie poza obszar ekranu lub stanie się nieczytelny? Musimy obsłużyć warunkowe łamanie linii.

W tym celu wykorzystamy jQuery do sprawdzenia ilości znaków i dodania/usunięcia odpowiedniej klasy. Klasa „break” przywraca domyślą wartość „white-space” a także ogranicza szerokość okienka:

[data-tooltip]{
  &.break:before {
    white-space: normal;
    width: 360px;
  }
}

Ostatnim krokiem jest napisanie prostego skryptu jQuery do sprawdzania długości tekstu:

$("[data-tooltip]").on('mouseenter',function(){
  if( $(this).data('tooltip').length > 50 ){
    $(this).addClass('break');
  } else {
    $(this).removeClass('break');
  }
});

Rezultat

Po upiększeniu i zebraniu wszystkiego do kupy wygląda to tak:

Zobacz na Codepen Prosty tooltip CSS by Michał Wilk (@devolk) on CodePen.22268

Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.