Popisek CSS

Obsah

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-local {
  position: relative;
    
display: inline-block;
  border-bottom: 1px dotted 
black; /* If you want dots under the hoverable text */
}
/* Tooltip text 
*/
.tooltip-local .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-local:hover 
.tooltiptext {
  visibility: visible;
}
</style>
<div class="tooltip-local">Hover 
over me
  <span class="tooltiptext">Tooltip 
text</span>
</div>

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Basic Tooltip</h2>

<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

<p>Note that the position of the tooltip text isn't very good. Go back to the tutorial and continue reading on how to position the tooltip in a desirable way.</p>

</body>
</html>

Příklad vysvětlen

HTML: Použijte prvek kontejneru (například <div>) a přidejte "tooltip". Když uživatel najede myší na tento <div>, zobrazí se text popisku.

Text popisku je umístěn uvnitř vloženého prvku (např. <span>) s class="tooltiptext".

CSS: Třída popisek používá position:relative, které je potřeba k umístění textu popisku (position:absolute). Poznámka: Níže jsou uvedeny příklady umístění popisku.

Třída tooltiptext obsahuje skutečný text popisku. to je ve výchozím nastavení skrytá a bude viditelná při najetí myší (viz níže). Také jsme přidali některé základní styly: šířka 120 pixelů, černá barva pozadí, bílá barva textu, vycentrovaný text a 5px horní a spodní odsazení.

Vlastnost CSS border-radius se používá k přidání zaoblených rohů do popisku text.

Selektor :hover se používá k zobrazení textu popisku, když uživatel přesune umístěte kurzor myši nad <div> pomocí class="tooltip".

Popisky pro určování polohy

V tomto příkladu je popisek umístěn vpravo (vlevo:105 %) od "hoverable" text (<div>). Všimněte si také, že top:-5px se používá k umístění doprostřed prvku kontejneru. Používáme číslo 5, protože text popisku má horní a spodní polstrování 5px. Pokud zvýšíte její odsazení, zvyšte také hodnotu vlastnosti top na ujistěte se, že zůstane uprostřed (pokud to chcete). Stejný platí, pokud chcete, aby byl popisek umístěn vlevo.

Pravá nápověda

.tooltip-local .tooltiptext {
  top: -5px;
  
left: 
105%; 
}

Výsledek :

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Levá nápověda

.tooltip-local .tooltiptext {
  top: -5px;
  
right: 
105%; 
}

Výsledek :

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

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 vlastnost margin-left s hodnotou mínus 60 pixelů. Toto slouží k vystředění popisku nad/pod textem, který lze umístit. Je to nastavené do poloviny šířky popisku (120/2=60).

Nahoru Popisek

.tooltip-local .tooltiptext {
  width: 120px;
  
bottom: 100%;
  left: 
50%; 
  margin-left: -60px; /* Use half of the width 
(120/2 = 60), to center the tooltip */
}

Výsledek :

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Dolní nápověda

.tooltip-local .tooltiptext {
  width: 120px;
  top: 100%;
  left: 
50%; 
  margin-left: -60px; /* Use half of the width 
(120/2 = 60), to center the tooltip */
}

Výsledek :

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip</h2>
<p>Move the mouse over the text below:</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Šipky popisku

Chcete-li vytvořit šipku, která by se měla objevit z určité strany popisku, přidejte „prázdné“ obsah po popis, s třídou pseudoprvku ::after spolu s obsahem vlastnictví. Samotná šipka je vytvořena pomocí ohraničení. Tím se vytvoří popis vypadat jako bublina.

Tento příklad ukazuje, jak přidat šipku do spodní části popisku:

Šipka dole

.tooltip-local .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 :

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  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;
}

.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;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip w/ Bottom Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Příklad vysvětlen

Umístěte šipku do popisku: top: 100 % umístí šipku na spodní části popisku. vlevo: 50 % šipku vycentruje.

Poznámka: Vlastnost border-width určuje velikost Šíp. Pokud toto změníte, změňte také hodnotu margin-left na stejnou. Tento udrží šipku uprostřed.

barva ohraničení se používá k transformaci obsahu na šipku. Nastavili jsme horní okraj na černý a zbytek na průhledný. Kdyby byly všechny strany černé, ty skončilo by to č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-local .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 :

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip w/ Top Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Tento příklad ukazuje, jak přidat šipku nalevo od popisku:

Šipka vlevo

.tooltip-local .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 :

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip w/ Left Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Tento příklad ukazuje, jak přidat šipku napravo od popisku:

Šipka doprava

.tooltip-local .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 :

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip w/ Right Arrow</h2>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

Popisky Fade In (animace)

Pokud chcete zmizet v textu popisku, když má být viditelný, vy může použít vlastnost CSS transition spolu s opacity vlastnost a přejít z úplné neviditelnosti na 100% viditelnou za určitý počet sekund (1 sekunda v našem příkladu):

Příklad

.tooltip-local .tooltiptext {
  opacity: 0;
  
transition: opacity 1s;
}
.tooltip-local:hover 
.tooltiptext {
  opacity: 1;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  
  /* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
<body style="text-align:center;">

<h2>Fade In Tooltip on Hover</h2>
<p>When you move the mouse over the text below, the tooltip text will fade in and take 1 second to go from completely invisible to visible.</p>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>