Всплывающая подсказка с помощью CSS: пошаговая инструкция и способы удаления

- , . tooltip. , , . , , .

, , .

, . , , . , , :

• . . , , tooltip .
• . , , . , tooltip , .
• . , , . tooltip , .
• . , .
• . , , , .

Tooltip HTML

-. .

, title, HTML-.

<p>
     4,22 
<i title="9 460 730 472 580 800 "> </i> 
 ,   270 .       .
</p>

<img title=" " src="disney.jpg">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

HTML: - . :

• ;
• , ;
• .

HTML- title , . , CSS.

CSS-tooltip

. CSS:

• - ;
• display
  
  
  
  ;
• :hover
  
  
  
  , , ;
• :before



:after
  
  
  
  , , HTML-;
• .

, tooltip-.

:hover



, , , .

CSS-tooltip HTML- , . , .

. , .

. , CSS. . , . .

CSS

tooltip .

, HTML-:

<h2>  </h2>
<ul class="stars">
  <li class="star"> </li>
  <li class="star"> </li>
  <li class="star"> </li>  
  <li class="star"> </li>
  <li class="star"> </li>
  <li class="star">
     
    <div class="tooltip">
      <img src="proxima.jpg">
      ́ ́ ( . proxima — ) —  ,      ,      .
    </div>
  </li>
</ul>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

CSS:

.star {
  position: relative;
}

/*     */
.star .tooltip {
  display: none;
  position: absolute;
  top: 50%; 
  transform: translateY(-50%);
  left: 100%;
}

/*     */
.star .tooltip:before { ... }

/*     */
.star:hover .tooltip { display: block; }
  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, .

, .

. , . , .

HTML- :

<div class="instruments">
  <div class="instrument" data-tooltip="">
    <img src="brush-icon.svg">
  </div>
  <div class="instrument" data-tooltip="">
    <img src="color-fill-icon.svg">
  </div>
  <div class="instrument" data-tooltip=" ">
    <img src="zoom-in-icon.svg">
  </div>
  <div class="instrument" data-tooltip=" ">
    <img src="zoom-out-icon.svg">
  </div>
</div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

data-tooltip



. , HTML- .

tooltip , , .

/*     */
.instrument {
  position: relative;

  color: #666;
  background: white;
  
  cursor: pointer;
}

/*      */
.instrument:hover {
  background: #666;
  color: white;
}

/*    */
.instrument:hover:after {
  content: attr(data-tooltip);
  position: absolute;
  left: 100%;
  
  color: #666;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, display: block. position



left/right/top/bottom



. data-tooltip



CSS attr()



. .

tooltip- CSS- :hover



. . JavaScript, CSS .

CSS :focus



, . :hover



, , , . , .

:

<a class="star" href="javascript:void(0)">
   
  <div class="tooltip">
      <img src="proxima.jpg">
      ́ ́ ( . proxima — ) —  ,      ,      .
   </div>
</a>
   
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

href



javascript:void(0)



, .

:

.star .tooltip {
  display: none;
}

.star:focus .tooltip {
  display: block;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

, .

, tooltip , JavaScript. , .