Tooltip - jak dobrać szerokość?

Question

Cześć, 

HTML i CSS uczę się dopiero od wczoraj, stąd moje możliwe błahe pytanie. 

Chcę dostosować odpowiednio szerokość dymka.

Próbuję zrobić tooltipa, tylko nie bardzo pasuje mi parametr auto, bo to zbyt mocno przycina. 

Próbowałem zrobić to na calc(auto + 8px), lecz najwidoczniej nie można używać "auto" w takich operacjach

calc(100% + 8px) też mi nie pasuje

Po majstrowemu wykminiłem, by po prostu dodawać po dwie spacje po każdej stronie i wtedy "auto" i działa, ale to taki mało elegancki sposób. 

Na tej stronie są bardzo ładne tooltipy, chciałbym osiągnąć coś w tym stylu

Wystarczy najechać na jakąkolwiek kategorię

Szukam eleganckiego sposobu, potrzebuję coś jakby parametru szerokości tekstu(?!)

Jakoś na pewno się da, bo widzę, że te tooltipy z tej strony nie mają specjalnie sformatowanego tekstu.

Skrypt na tooltipy mam z w3schools

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    max-width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 50%;
    margin-left: -60px; 
    
    /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
    opacity: 0;
    transition: opacity 1s;
}

.tooltip .tooltiptext {
    visibility: visible;
    opacity: 0.8;
}

Skrypt specjalnie zrobiony bez :hover, by móc testować.

Tekstem tooltipa ma być zwykły jeden wiersz bez przerywania linii nawet.

 

Answer 1

Poczytaj sobie o tzw. modelu pudełkowym w css, a dokładniej o padding. Ustaw jakąś szerokość max aby w razie czego nie zrobił Ci się dymek na całą szerokość ekranu co mogłoby źle wyglądać i dodaj jakiś padding, aby zawsze tekst był odsunięty nieco od ramki.

Comments

Dobra, takiej odpowiedzi oczekiwałem, już ogarniam, pochwalę się rezultatami za dłuższą chwilę.

---

Tak na marginesie to jak uczysz się drugi dzień to wziąłeś sobie na tapetę całkiem ciekawe zadanie :)

Poczytaj też o codepen, spróbuj sobie tam coś zrobić, możesz tam też podciągać dodatkowe biblioteki itp. i potem klikasz w save i udostępniasz linka. Dzięki temu nie musisz wklejać kodu html/css/js tyko link i każdy ma do tego dostęp - istotnie ułatwia to pomaganie bo na żywo wszystko analizujesz i zmieniasz.

---

Dobra, już coś wykombinowałem i wygląda na to, że działa. Już widziałem codepen, jeszcze nie ogarniałem, ale w przyszłości na pewno,

Jeszcze się w tym wszystkim gubię, robię sobie projekt stronki o programowaniu w języku który sam zrobiłem, trochę problemów jest, więc będę tutaj zaglądał. Na pewno chciałbym ogarnąć spoiler, wczoraj czegoś szukałem ale niezbyt rozumiałem.