CSS Tooltip

Tooltip animowane, wyskakujące okno po najechaniu na link.

CSS Tooltip

Często chcemy opisać łącze internetowe, za pomocą krótkiego tekstu który pojawiałby się po najechaniu na nasz element. Dzięki zastosowaniu pseudo-elementów i atrybutowi data- możemy wykonać taką akcje w prosty sposób. Dodając do naszego szablonu CSS właściwość animation uzyskamy efekt prostego animowanego tooltip-u.

HTML:

<a class="tooltip" href="http://compsoul.pl" data-tooltip="Tworzymy profesjonalne serwisy internetowe, strony www, sklepy internetowe, projekty graficzne a także zajmujemy się serwisem komputerowym." target="_blank">compsoul.pl</a>

CSS:

.tooltip {
  color: #ffc000;
  display: inline-block;
  margin-top: -10px;
  padding-top: 10px;
  position: relative;
  text-decoration: none;
}
           
.tooltip:before {
  animation: hidden ease-in-out 0.2s 1 forwards;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 5px;
  color: #fff;
  content: attr(data-tooltip);
  opacity: 0;
  padding: 10px;
  position: absolute;
  top: 0px;
  transform: translateY(-100%);
  visibility: hidden;
  width: 300px;
}

.tooltip:after {
  animation: hidden ease-in-out 0.2s 1 forwards;
  border: solid transparent;
  border-top-color: rgba(0, 0, 0, 0.8);
  border-width: 10px 10px 0px;
  content: "";
  height: 0px;
  left: 10px;
  opacity: 0;
  position: absolute;
  top: 0px;
  visibility: hidden;
  width: 0px;
}

.tooltip:hover:before, .tooltip:hover:after {
  animation: show ease-in-out 0.4s 1 forwards;
}

@keyframes show {
  0%    {
           opacity: 0;
           visibility: hidden;
        }
  1%    {
           opacity: 0;
           visibility: visible;
        }
  100%  {
           opacity: 1;
           visibility: visible;
        } 
}

@keyframes hidden {
  0%    {
           opacity: 1;
           visibility: visible;
        }
  99%   {
           opacity: 0;
           visibility: visible;
        }
  100%  {
           opacity: 0;
           visibility: hidden;
        } 
}

DEMO:

compsoul.pl
Gotowe szablony stron www z wdrożeniem!

Komentarze:

Admin

10.05.2018
@Marek - A masz dostęp do szablonu strony, pliku index.html bądź index.php?

Marek

10.05.2018
Hej, Czy jest możliwe użycie tego tooltipa nie mając dostępu do pliku CSS strony?

Dodaj komentarz:

Ciasteczko to mały fragment tekstu, który serwis internetowy wysyła do przeglądarki i który przeglądarka wysyła z powrotem przy następnych wejściach na witrynę. Jest także niezwykle denerwujące i nic nie wnosi do świadomości użytkownika, który nie wie że te same informację mogę zapisać choćby w lokalnym magazynie strony internetowej. Więcej informacji znajduje się na podstronie "Polityka prywatności".