tekoms-web-dizajn

 

Nazad

Tooltips (balončići u tekstu) - naglašavanje dela teksta


Tooltips (balončići u tekstu) omogućavaju da se određeni deo teksta naglasi i stilizuje tako se da prelaskom miša preko određenih reči pojavljuje balončić sa dodatnim tekstom. Da bi se određeni 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 ... Takođe, 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".

U Head sekciji kreirati klasu i definisati stilove koji oblikuju svojstva balončima - širinu, font, boju ...


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

U odeljak Body unesite sledeći kod odnosno DIV klase tooltip oko dela rečenice koja se naglašava.


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

Prikaz u Browser-u


tooltips-in-html

DEMO verziji gde je platforma za online učenje za web dizajn možete pristupiti LOGIN PANELA

Cenu i način plaćanja Online obuke za web dizajn i programiranje - CENA OBUKE