Prosty TOOLTIP od 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.

GHOST_URL/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.