Tooltip w prostym i efektownym wykonaniu

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; 
}