Autor publikacji: Virtual Patriot - Administrator

Tooltip CSS

Data publikacji: Wrzesień 01 2013
Ostatnio edytowano: Wrzesień 07 2020

W tej części kursu CSS dowiemy się w jaki sposób utworzyć Tooltip wykorzystując do tego celu wyłącznie język CSS.

Czym jest Tooltip?

To dodatkowa informacja dla użytkownika, która pojawiaj się w określonych sytuacjach, np. w momencie gdy użytkownik najedzie kursorem myszki na dany element HTML.

Naszym celem będzie stworzenie układu elementów HTML, który został przedstawiony poniżej:

Pierwsza wersja naszego układu elementów HTML będzie zawierała pewną niedogodność, którą postaramy się wyeliminować w ostatnim kroku tej części kursu CSS.

Budowę Tooltip zaczniemy od umieszczenia odpowiednich elementów HTML w części body dokumentu HTML.

<body>

  <ul>
    <li>
      <a href="#">Strona - 1</a>
    </li>

    <li>
      <a href="#">Strona - 2</a>
    </li>

    <li>
      <a href="#">Strona - 3</a>
    </li>

    <li>
      <a href="#">Strona - 4</a>
    </li>
  </ul>

</body>

Do części body dodaliśmy listę ul, która stanowi strukturę pionowego menu, z którą mogliśmy zapoznać się w dziale drugim. Do naszych elementów HTML dodamy właściwości CSS, które mogliśmy poznać w poprzednich częściach tego kursu CSS.

Tworzymy następujące reguły CSS:

ul {
  list-style-type:none;
  margin:0;
  padding:0;
  width:300px;
  border:3px solid #FDD700;
}

ul li a {
  display:block;
  padding:15px;
  border-top:1px solid #FDD700;
  color:#00F;
  text-align:center;
  text-decoration:none;
  background-color:#EEE;
}

ul li:first-child a {
  border-top:none;
}

ul li a:hover {
  background-color:#FFF;
}

Rezultat:

Naszym celem jest dodanie, do przedstawionego układu elementów HTML, dodatkowego elementu, który będzie widoczny w momencie gdy najedziemy kursorem myszki na element li. Ten dodatkowy element HTML będzie zawierał w sobie krótką informację w postaci tekstu.

Dodajemy elementy div do elementów li, w których to elementach div umieszczamy interesujący nas tekst, który będzie informacją o tym, co możemy zobaczyć na danej stronie, do której prowadzi odnośnik, czyli element a, który znajduje się w danym elemencie li.

<body>

  <ul>
    <li>
      <a href="#">Strona - 1</a>
      <div>Znajdziesz tutaj zagadnienia dotyczące...</div>
    </li>

    <li>
      <a href="#">Strona - 2</a>
      <div>Zobaczysz tutaj ciekawe przykłady, które dotyczą...</div>
    </li>

    <li>
      <a href="#">Strona - 3</a>
      <div>Poznasz tutaj ciekawe historie, które...</div>
    </li>

    <li>
      <a href="#">Strona - 4</a>
      <div>Zobaczysz tutaj zdjęcia ciekawych...</div>
    </li>
  </ul>

</body>

Rezultat:

Tworzymy następujące reguły CSS, które umożliwią nam utworzenie docelowego Tooltip.

ul li {
  position:relative;
}

ul li div {
  width:100%;
  line-height:2em;
  padding:15px;
  border:1px solid #000;
  background-color:#FAFAFA;
  position:absolute;
  top:0;
  left:105%;
}

Rezultat:

Do elementu li została dodana właściwość position:relative; dzięki czemu każdy element HTML, który znajdzie się w zawartości elementu li, oraz który będzie zawierał w sobie właściwość position:absolute; będzie pozycjonowany względem elementu li. Wspomnianym elementem, w naszym układzie elementów HTML, jest element div, ponieważ do tego elementu dodaliśmy właściwość position wraz z wartością absolute. Do wspomnianego elementu div dodaliśmy również właściwość left:105%; która odsunęła element div o 105% wartości szerokości jego elementu potomka, który posiada w sobie właściwość position:relative; czyli elementu li.

Czas sprawić, aby element div nie był wyświetlany. Efekt ten uzyskamy za pomocą właściwości display:none; Do naszego kodu dodamy również regułę CSS, która sprawi, że element div będzie dla nas widoczny, tylko w sytuacji gdy najedziemy kursorem myszki na jego rodzica, czyli na element li. Wspomniany efekt uzyskamy za pomocą reguły ul li:hover div oraz właściwości display:block;.

ul li div {
  width:100%;
  line-height:2em;
  padding:15px;
  border:1px solid #000;
  background-color:#FAFAFA;
  position:absolute;
  top:0;
  left:105%;
  display:none;
}

ul li:hover div {
  display:block;
}

Rezultat:

Niby wszystko jest w porządku, ponieważ utworzyliśmy układ elementów HTML, który został zaprezentowany na początku tej części kursu CSS, lecz nie do końca wszystko jest ok.

Problemem może być element div, który został umieszczony w elemencie li, oraz który został w tym elemencie ukryty za pomocą właściwości display:none; Dla niektórych robotów, które indeksują naszą stronę internetową, nasz układ elementów HTML może być mało "przyjazny", dlatego czas go trochę zmodyfikować.

W języku HTML 5 istnieje atrybut, który nazywa się data. Za pomocą niego możemy określić własny atrybut dla danego elementu HTML, wystarczy że po słowie data oraz myślniku, utworzymy własną nazwę dla naszego atrybutu, w którym będziemy chcieli umieścić jakąś informację i właśnie tą czynność wykonamy dla naszego układu elementów HTML.

<body>

  <ul>
    <li data-tooltip="Znajdziesz tutaj zagadnienia dotyczące...">
      <a href="#">Strona - 1</a>
    </li>

    <li data-tooltip="Zobaczysz tutaj ciekawe przykłady, które dotyczą...">
      <a href="#">Strona - 2</a>
    </li>

    <li data-tooltip="Poznasz tutaj ciekawe historie, które...">
      <a href="#">Strona - 3</a>
    </li>

    <li data-tooltip="Zobaczysz tutaj zdjęcia ciekawych...">
      <a href="#">Strona - 4</a>
    </li>
  </ul>

</body>

Czas zmodyfikować nieco nasze reguły CSS, aby uzyskać finalny efekt. Zapominamy o regułach CSS, które dotyczyły elementu div. Właściwości CSS z reguły ul li div przenosimy do nowej reguły CSS:

ul li:hover:before {
  content:attr(data-tooltip);
  width:100%;
  line-height:2em;
  padding:15px;
  border:1px solid #000;
  background-color:#FAFAFA;
  position:absolute;
  top:0;
  left:105%;
}

Reguła ul li:hover:before dodaje dodatkowy element HTML do początkowej zawartości elementu li będącego potomkiem elementu ul, gdy na dany element li najedziemy kursorem myszki. Zawartością dodatkowego elementu HTML będzie tekst, jaki umieściliśmy w atrybucie data-tooltip, stąd też zapis content:attr(data-tooltip);

Rezultat:

Kod całego dokumentu HTML został umieszczony poniżej:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      ul {
        list-style-type:none;
        margin:0;
        padding:0;
        width:300px;
        border:3px solid #FDD700;
      }

      ul li {
        position:relative;
      }

      ul li a {
        display:block;
        padding:15px;
        border-top:1px solid #FDD700;
        color:#00F;
        text-align:center;
        text-decoration:none;
        background-color:#EEE;
      }

      ul li:first-child a {
        border-top:none;
      }

      ul li a:hover {
        background-color:#FFF;
      }

      ul li:hover:before {
        content:attr(data-tooltip);
        width:100%;
        line-height:2em;
        padding:15px;
        border:1px solid #000;
        background-color:#FAFAFA;
        position:absolute;
        top:0;
        left:105%;
      }
    </style>
  </head>

  <body>

    <ul>
      <li data-tooltip="Znajdziesz tutaj zagadnienia dotyczące...">
        <a href="#">Strona - 1</a>
      </li>

      <li data-tooltip="Zobaczysz tutaj ciekawe przykłady, które dotyczą...">
        <a href="#">Strona - 2</a>
      </li>

      <li data-tooltip="Poznasz tutaj ciekawe historie, które...">
       <a href="#">Strona - 3</a>
      </li>

      <li data-tooltip="Zobaczysz tutaj zdjęcia ciekawych...">
        <a href="#">Strona - 4</a>
      </li>
    </ul>

  </body>
</html>

W następnej części kursu utworzymy Animowany Tooltip CSS3, który dodamy do pionowego menu, które utworzyliśmy w dziale drugim tego kursu CSS.