blog.nayma.pl


Dla miłośników HTML5, CSS3, JS, WordPress oraz systemu macOS

Dariusz Nayma.pl
Autor Wpisu

Podziel się


Tagi


Prosty TOOLTIP od Nayma.pl

Dariusz Nayma.plDariusz Nayma.pl

Nasz prosty tooltip

Na łamach blogu pisałem już o świetnym tooltip Hint.css 2.0. Po co więc kolejny tooltip ?? Otóż Hint.css w chwili pisania artykułu był darmowy zarówno dla stron prywatnych jak i komercyjnych. Docelowo stał się jednak płatny. Jego cena jest bardzo wygórowana bo $15 za pojedynczą stronę lub $50 za brak limitów. Jak za tak proste narzędzie jest to cena zbyt wygórowana. Na szczęście taki tooltip można napisać samemu. Domyślnie skorzystaliśmy z tutorialu z EnvatoTuts i stworzyliśmy swój prosty, lekki i mały tooltip. Za darmo na licencji MIT.

https://blog.nayma.pl/hint-css-2-0-swietny-css-tooltip/

Zapraszamy do zapoznania się z jego możliwościami i zachęcamy do pobrania.

Przykłady użycia

**1.**Standardowy tooltip od góry:

<span ntt="Tooltip od góry">Przykład od góry</span>

Przykład od góry

**2.**Tooltip od lewej strony:

<span ntt="Tooltip z lewej strony" flow="left">Przykład lewa strona</span>

Przykład lewa strona

**3.**Tooltip od prawej strony:

<span ntt="Tooltip z prawej strony" flow="right">Przykład prawa strona</span>

Przykład prawa strona

**4.**Tooltip od dołu:

<span ntt="Tooltip od dołu" flow="down">Przykład od dołu</span>

Przykład od dołu

Demo na Github Pages:
https://naymaeu.github.io/nayma-tooltip/

Drugie demo na CodePen.io:
http://codepen.io/Naymapl/pen/ryQPwG

Download

Nasz tooltip został stworzony na podstawie poradnika z EnvatoTuts i został troszkę usprawniony i ulepszony. Jest bardzo lekki: 3kb lub niecałe 1kb Gzip. Zapraszamy również na github: https://github.com/naymaeu/nayma-tooltip

Pobierz Nayma Tooltip

Poniżej wklejamy kompletny kod:

[ntt] {
    position: relative
}

[ntt]::before,
[ntt]::after {
    text-transform: none;
    font-size: 10px;
    line-height: 1;
    user-select: none;
    pointer-events: none;
    position: absolute;
    display: none;
    opacity: 0
}

[ntt]::before {
    content: '';
    border: 5px solid transparent;
    z-index: 1000
}

[ntt]::after {
    content: attr(ntt);
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
    font-size: 10px;
    vertical-align: super;
    letter-spacing: 1px;
    text-align: center;
    min-width: 3em;
    max-width: 21em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: .8em 1em;
    border-radius: 3px;
    box-shadow: 0 1em 2em -.6em rgba(0, 0, 0, 0.35);
    background: rgba(0, 0, 0, .9);
    color: #fff;
    z-index: 1000;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

[ntt]:hover::before,
[ntt]:hover::after {
    display: block
}

[ntt='']::before,
[ntt='']::after {
    display: none!important
}

[ntt]:not([flow])::before,
[ntt][flow^="up"]::before {
    bottom: 100%;
    border-bottom-width: 0;
    border-top-color: rgba(0, 0, 0, .85);
    margin-bottom: 5px
}

[ntt]:not([flow])::after,
[ntt][flow^="up"]::after {
    bottom: calc(100% + 10px)
}

[ntt]:not([flow])::before,
[ntt]:not([flow])::after,
[ntt][flow^="up"]::before,
[ntt][flow^="up"]::after {
    left: 50%;
    transform: translate(-50%, -.6em)
}

[ntt][flow^="down"]::before {
    top: 100%;
    border-top-width: 0;
    border-bottom-color: rgba(0, 0, 0, .9);
    margin-top: 5px
}

[ntt][flow^="down"]::after {
    top: calc(100% + 10px)
}

[ntt][flow^="down"]::before,
[ntt][flow^="down"]::after {
    left: 50%;
    transform: translate(-50%, .6em)
}

[ntt][flow^="left"]::before {
    top: 50%;
    border-right-width: 0;
    border-left-color: rgba(0, 0, 0, .9);
    left: calc(0em - 10px);
    transform: translate(-.6em, -50%)
}

[ntt][flow^="left"]::after {
    top: 50%;
    right: calc(100% + 10px);
    transform: translate(-.6em, -50%)
}

[ntt][flow^="right"]::before {
    top: 50%;
    border-left-width: 0;
    border-right-color: rgba(0, 0, 0, .9);
    right: calc(0em - 10px);
    transform: translate(.6em, -50%)
}

[ntt][flow^="right"]::after {
    top: 50%;
    left: calc(100% + 10px);
    transform: translate(.6em, -50%)
}

@keyframes ntts-vert {
    to {
        opacity: .9;
        transform: translate(-50%, 0)
    }
}

@keyframes ntts-horz {
    to {
        opacity: .9;
        transform: translate(0, -50%)
    }
}

[ntt]:not([flow]):hover::before,
[ntt]:not([flow]):hover::after,
[ntt][flow^="up"]:hover::before,
[ntt][flow^="up"]:hover::after,
[ntt][flow^="down"]:hover::before,
[ntt][flow^="down"]:hover::after {
    animation: ntts-vert 400ms ease-out forwards
}

[ntt][flow^="left"]:hover::before,
[ntt][flow^="left"]:hover::after,
[ntt][flow^="right"]:hover::before,
[ntt][flow^="right"]:hover::after {
    animation: ntts-horz 400ms ease-out forwards
}

Zapraszamy do komentowania wszystkich, którzy mają jakieś ciekawe pomysły na rozwinięcie tego prostego narzędzia. Dziękujemy za wsparcie w postaci tweetów lub udostępniania linku do bloga.

Komentarze