Popisek CSS
Vytvářejte popisky pomocí CSS.
Demo: Příklady popisků
Popisek se často používá k zadání dalších informací o něčem, když uživatel přesune ukazatel myši nad prvek:
Základní popis
Vytvořte nápovědu, která se zobrazí, když uživatel najede myší na prvek:
Příklad
<style>
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted
black; /* If you want dots under the hoverable text */
}
/* Tooltip text
*/
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text - see examples below! */
position: absolute;
z-index: 1;
}
/* Show
the tooltip text when you mouse over the tooltip container */
.tooltip:hover
.tooltiptext {
visibility: visible;
}
</style>
<div class="tooltip">Hover
over me
<span class="tooltiptext">Tooltip
text</span>
</div>
Příklad vysvětlen
HTML: Použijte prvek kontejneru (jako <div>) a přidejte do
"tooltip"něj třídu. Když uživatel najede myší na tento <div>, zobrazí se text nápovědy.
Text popisku je umístěn uvnitř vloženého prvku (jako <span>) s class="tooltiptext".
CSS: Třída tooltipuse position:relative, která je potřebná k umístění textu popisku ( position:absolute).
Poznámka: Podívejte se na níže uvedené příklady, jak umístit nápovědu.
Třída tooltiptextobsahuje skutečný text popisku. Ve výchozím nastavení je skrytý a bude viditelný při najetí myší (viz níže). Také jsme do něj přidali některé základní styly: šířka 120 pixelů, černá barva pozadí, bílá barva textu, text na střed a horní a spodní odsazení 5 pixelů.
Vlastnost CSS border-radiusse používá k přidání zaoblených rohů do textu popisku.
Selektor se :hoverpoužívá k zobrazení textu popisku, když uživatel najede myší na <div> s class="tooltip".
Popisky umístění
V tomto příkladu je bublinová nápověda umístěna napravo ( left:105%) od „zobrazeného“ textu (<div>). Všimněte si také, že top:-5pxse používá k umístění do středu jeho kontejneru. Použijeme číslo 5 , protože text popisku má horní a spodní odsazení 5px. Pokud zvýšíte jeho výplň, zvyšte také hodnotu topnemovitosti, abyste zajistili, že zůstane uprostřed (pokud je to něco, co chcete). Totéž platí, pokud chcete, aby byl popisek umístěn vlevo.
Pravá nápověda
.tooltip .tooltiptext {
top: -5px;
left:
105%;
}
Výsledek:
Levá nápověda
.tooltip .tooltiptext {
top: -5px;
right:
105%;
}
Výsledek:
Pokud chcete, aby se popisek zobrazoval nahoře nebo dole, podívejte se na příklady níže. Všimněte si, že používáme margin-leftvlastnost s hodnotou mínus 60 pixelů. Toto slouží k vycentrování popisku nad/pod textem, který lze umístit. Je nastavena na polovinu šířky popisku (120/2 = 60).
Top Tooltip
.tooltip .tooltiptext {
width: 120px;
bottom: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Výsledek:
Dolní nápověda
.tooltip .tooltiptext {
width: 120px;
top: 100%;
left:
50%;
margin-left: -60px; /* Use half of the width
(120/2 = 60), to center the tooltip */
}
Výsledek:
Šipky s nápovědou
Chcete-li vytvořit šipku, která by se měla objevit z určité strany nápovědy, přidejte za nápovědu „prázdný“ obsah s třídou pseudoprvků ::afterspolu s content
vlastností. Samotná šipka je vytvořena pomocí ohraničení. Díky tomu bude popisek vypadat jako bublina.
Tento příklad ukazuje, jak přidat šipku do spodní části popisku:
Šipka dole
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 100%;
/* At the bottom of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
Výsledek:
Příklad vysvětlen
Umístěte šipku do popisku: top: 100%umístí šipku do spodní části popisku. left: 50%vycentruje šipku.
Poznámka: Vlastnost border-widthurčuje velikost šipky. Pokud toto změníte, změňte také margin-lefthodnotu na stejnou. Tím zůstane šipka ve středu.
Slouží k border-colortransformaci obsahu na šipku. Horní okraj nastavíme na černý a zbytek na průhledný. Pokud by všechny strany byly černé, skončili byste s černou čtvercovou krabicí.
Tento příklad ukazuje, jak přidat šipku do horní části popisku. Všimněte si, že tentokrát jsme nastavili barvu spodního okraje:
Šipka nahoru
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%; /* At the top of the tooltip */
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent black transparent;
}
Výsledek:
Tento příklad ukazuje, jak přidat šipku nalevo od popisku:
Šipka vlevo
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
right: 100%; /* To the left of the tooltip
*/
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
Výsledek:
Tento příklad ukazuje, jak přidat šipku napravo od popisku:
Šipka doprava
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
top: 50%;
left: 100%; /* To the right of the
tooltip */
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent transparent black;
}
Výsledek:
Popisky pro roztmívání (animace)
Chcete-li zmizet v textu popisku, když má být viditelný, můžete použít vlastnost CSS transitionspolečně s opacity
vlastností a přejít z úplné neviditelnosti na 100% viditelnost za určitý počet sekund (1 sekunda v našem příklad):
Příklad
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover
.tooltiptext {
opacity: 1;
}