tekoms-doo

TOOLTIPS - balončići u tekstu

English

tekoms-web-dizajn

 

 

Nazad

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

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">Pređite mišem preko teksta <span class="tooltiptext"> Ovde ide tekst u balončiću </span></div> 
</h3>

Prikaz u Browser-u