html css trikovi tooltips u html u


Besplatni online kurs web dizajna

Nastavna jedinica: Trick 2 - Tooltips u HTML-u


Nazad


Tooltips u HTML kodu - balončići u tekstu


Tooltips (balončići u tekstu) omogućavaju da se odredjeni deo teksta naglasi i stilizuje tako se da prelaskom miša preko odredjenih reči pojavljuje balončić sa dodatnim tekstom. Da bi se odredjeni deo teksta naznačio potrebno je HTML kodu taj deo teksta "oivičiti" DIV TAG-om klase Tooltip u kome se posebno "oivičava" preko SPAN DIV TAG-a tekst koji se pojavljuje u balončiću. Svaka klasa poziva svojstva koja se nalaze u stilovima unutar HEAD sekcije čime se definiše vizuelni izleg balončića - crna boja, bela slova, dimenzije itd ... Takodje, preko stilova se definiše da osnovni div tag (tooltips) ima donju liniju u vidu tačkica čime se naglašava da je taj deo teksta označen. Prelaskom miša preko tog dela teksta poziva se stil hover koji omoguća da se pozivaju svojstva klase ".tooltip .tooltiptext" odnosno ".tooltip:hover .tooltiptext".

Head


<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 130px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
}
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}
</style>

Body


<h3> 
<div class="tooltip">Predjite mišem preko teksta <span class="tooltiptext"> Ovde ide tekst u balončiću </span></div> 
</h3>

Prikaz u Browser-u


NOVO - DOPUNITE ZNANJE - WEB PROGRAMIRANJE (PHP, SQL)

Posle pređenih svih nastavnih jedinica u okviru Besplatne online obuke za web dizajn, obuku možete nadograditi odnosno dopuniti svoje znanje tako što će naučiti i web programiranje - PHP, SQL - izrada dinamičkih sajtova, online prodavnica. Kurs prati napisana skripta, izvorni kodovi i nekoliko desetina video nastavnih jedinica gde polaznik hronološki uči pisanje koda u PHP-u, testiranje skripti, korišćenje i rad sa Local serverom.

Cena obuke