Tooltip w prostym i efektownym wykonaniu

Damian Kołodziejski

Tooltip w prostym i efektownym wykonaniu
15 września, 2017 Katarzyna Sobczak

Tooltip w prostym i efektownym wykonaniu

Minimalizacja interfejsu może być łatwiejsza niż się wydaje.

Starając się zminimalizować interfejs, często stosuje się ikony w systemach i aplikacjach. Niestety, gdy narzędzie jest udostępnione nowej grupie użytkowników, niezbędne są wyjaśnienia co dana ikona oznacza. Aktualnie HTML wspiera atrybut title, który może dostarczyć dodatkowych informacji o elemencie, którego dotyczy, jednak nie zachwycają one wyglądem ani tym, że tekst zwija się dopiero, gdy dosięgnie krawędzi okna.

W tym artykule pokażę, jak wykorzystać niestandardowe atrybuty w elementach HTML, by wyświetlić ładny tooltip. Można utworzyć z niego moduł CSS, który będzie można zaimportować do każdego projektu.

Sztuczka polega na tym, by umiejętnie skorzystać z pseudo selektorów CSS ::before oraz ::after. W tym celu do elementu, z którego tooltip ma się wyłaniać, należy dodać atrybut t-tip o wartości wyświetlanej wskazówki oraz atrybut t-tip-pos, który będzie odpowiadać za pozycję wyświetlanego okna.


<button t-tip="Udostępnij na Pinterest" t-tip-pos="left"> 
    <img width="50" src="..." /> 
<button>

Selektor ::before będzie odpowiadać za rożek wyświetlający skąd dany tooltip pochodzi.

Selektor ::after będzie ramką z tekstem zawierającym treść.


[t-tip]::after { 
    content: attr(t-tip); 
    position: absolute; 
    left: 50%; 
    top: -6px; 
    transform: translateX(-50%) translateY(-100%); 
    background: rgba(0, 0, 0, 0.7); 
    text-align: center; 
    color: #fff; 
    font-size: 12px; 
    min-width: 80px; 
    border-radius: 5px; 
    pointer-events: none; 
    padding: 5px; 
    z-index: 99; 
    opacity: 0; 
} 

[t-tip]::before { 
    content: ""; 
    position: absolute; 
    top: -6px; 
    left: 50%; 
    transform: translateX(-50%); 
    border-width: 4px 6px 0 6px; 
    border-style: solid; 
    border-color: rgba(0, 0, 0, 0.7) transparent; 
    z-index: 99; 
    opacity: 0; 
} 

Aby nadać odpowiednią pozycję w widoku okienku tooltipa należy do atrybutu t-tip-pos poprzypisywać odpowiednie właściwości.


[t-tip-pos='top']::after {    
    left: 50%;
}
[t-tip-pos='top']::before {
    left: 50%;
} 

[t-tip-pos='right']::after {
    left: 100%;
    top: 50%;
    margin-left: 9px;
    transform: translateX(0%) translateY(-50%);
}
[t-tip-pos='right']::before {
    left: 100%;
    top: 50%;
    margin-left: 1px;
    transform: translatey(-50%) rotate(90deg);
} 

[t-tip-pos='left']::after {
    left: 0%;
    top: 50%;
    margin-left: -8px;
    transform: translateX(-100%) translateY(-50%);
}
[t-tip-pos='left']::before {
    left: 0%;
    top: 50%;
    margin-left: -12px;
    transform: translatey(-50%) rotate(-90deg);
} 

[t-tip-pos='bottom']::after {
    top: 100%;
    margin-top: 9px;
    transform: translateX(-50%) translateY(0%);
}
[t-tip-pos='bottom']::before {
    top: 100%;
    margin-top: 9px;
    transform: translateX(-50%) translatey(-100%) rotate(-180deg);
} 

[t-tip]:hover::after,
[t-tip]:hover::before {
    opacity: 1;
}

Ważne jest, by element z atrybutem t-tip posiadał cechę position: relative. W innym przypadku pozycjonowanie nie będzie działać jak należy.


[t-tip] { 
    position: relative; 
    display: inline-block; 
} 

Podziel się

Autor: Damian Kołodziejski

Damian Kołodziejski

Damian Kołodziejski

Ostatnie artykuły autora

Analiza i porównanie frameworków JavaScript, cz. 2

Analiza i porównanie frameworków JavaScript, cz. 2

Porównanie ze względu na budowę małych oraz dużych aplikacji internetowych. Druga część serii.

Zmiana wyglądu formularzy

Zmiana wyglądu formularzy

Zmiana wyglądu checkbox, radio, select jest możliwa tylko za pomocą CSS. W artykule pokazuję jak to zrobić.

Tooltip w prostym i efektownym wykonaniu

Tooltip w prostym i efektownym wykonaniu

W tym artykule pokazano, jak wykorzystać niestandardowe atrybuty w elementach HTML, by wyświetlić ładny tooltip. Można utworzyć z niego moduł CSS, który będzie można zaimportować do każdego projektu.

Zarejestruj się i przetestuj APN Meeting Room

Wypróbuj system rezerwacji sal w praktyce, na Twojej infrastrukturze.
Wersja demonstracyjna umożliwia Ci instalację oprogramowania na 3 urządzeniach.

Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. drogą elektroniczną
Chcę otrzymywać treści marketingowe od A.P.N. Promise S.A. telefonicznie

Administratorem danych osobowych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. z siedzibą w Warszawie. Kontakt z osobą odpowiedzialną za ochronę danych osobowych jest możliwy za pośrednictwem adresu e-mail: iodo@promise.pl. Podane dane będą przetwarzane w zakresie niezbędnym do realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO, w zakresie niezbędnym dla prawidłowej realizacji żądania oraz oferowania i świadczenia usług, marketingu produktów i usług własnych oraz przeprowadzenia ankiet i oceny satysfakcji zgodnie z art. 6 ust. 1 lit. f RODO przez okres niezbędny dla realizacji celów oraz w przypadku wyrażenia zgody na podstawie art. 6 ust. 1 lit. a RODO w celu dostarczenia treści marketingowych środkami komunikacji elektronicznej lub za pomocą urządzeń telefonicznych.

Przysługuje Ci prawo do żądania dostępu do danych osobowych, ich sprostowania, usunięcia lub ograniczenia przetwarzania, jak również prawo sprzeciwu wobec przetwarzania, prawo do przenoszenia danych, a także prawo złożenia skargi do organu nadzorczego, którym w Polsce jest Prezes Urzędu Ochrony Danych Osobowych. Podanie danych jest dobrowolne, jednak niezbędne dla realizacji powyżej wskazanych celów. Odbiorcami danych mogą być podmioty lub osoby obsługujące administratora w zakresie w zakresie hostingu, komunikatorów internetowych, usług IT, księgowości, archiwizacji. Więcej informacji w Polityce Prywatności oraz Regulaminie.

Register and test the APN Meeting Room booking system.

Registering and installing the trial version you are allowed to install the software on 3 devices.

I want to receive marketing content from A.P.N. Promise S.A. electronically
I want to receive marketing content from A.P.N. Promise S.A. by phone

The data controller of personal data collected using the form is A.P.N. Promise S.A. with its registered office in Warsaw. Contact with the person responsible for the personal data protection is possible via following e-mail address: iodo@promise.pl. The given data shall be processed to the extent necessary to carry out specified request in accordance with art. 6(1)(b) of GDPR and to the extent necessary for the correct realization of the request and offer and provision of services, own product and services marketing and conducting surveys and satisfaction ratings in accordance with art. 6(1)(f) of GDPR for the period necessary to achieve the purposes and in the event of consent in accordance with art. 6(1)(a) of the GDPR to provide marketing content by electronic means or by telephone devices.

You have the right to request access to your personal data, rectification, deletion or limitation of processing, as well as the right to object to processing, the right to transfer data and the right to lodge a complaint with a supervisory authority, i.e. the President of the Personal Data Protection Office in Poland. Providing data is voluntary but necessary for the realization of the above-mentioned purposes. Recipients of data may be entities or persons servicing the data controller in the field of hosting, instant messengers, IT services, accounting, archiving. More information in the Privacy Policy and Regulations.

Cybersecurity w obszarze zarządzania zasobami oprogramowania

Napisz do nas, a skontaktujemy się z Tobą i bezpłatnie porozmawiamy o Twoim poziomie cyberbezpieczeństwa w obszarze SAM.

 

Administratorem danych gromadzonych z wykorzystaniem formularza jest A.P.N. Promise S.A. Podane przez Ciebie dane będą przetwarzane w zakresie niezbędnym do podjęcia kontaktu lub realizacji określonego żądania zgodnie z art. 6 ust. 1 lit. b RODO przez okres niezbędny dla realizacji Twojego zgłoszenia. Wszelkie informacje w zakresie przetwarzania podanych przez Ciebie w formularzu danych oraz posiadanych uprawnieniach znajdziesz w Polityce prywatności. Kliknij i dowiedz się więcej jeżeli informacje podane powyżej nie są dostatecznie jasne!

Zostaw adres mailowy i nie przegap kolejnego szkolenia!

[contact-form-7 404 "Not Found"]