Поместите всплывающую подсказку по форме css

Question

У меня есть формы круга, которые сделаны из CSS, я пытаюсь установить подсказку, которая появляется, когда я нахожусь в кругу, любые идеи о том, как это сделать? Вот мой круг код:

#circle1 { 
 
\t width: 52px; 
 
\t height: 52px; 
 
\t background: #f5e25d; 
 
    opacity: 0.9 
 
\t -moz-border-radius: 50%; 
 
\t -webkit-border-radius: 50px; 
 
\t border-radius: 50px; 
 
}

<div id="circle1"></div>

Answer 1

Вы можете достичь этого, помещая HTML элемент внутри #circle1 (я использовал span) для всплывающей подсказки, и используя #circle1:hover для отображения всплывающей подсказки. Затем я положил треугольник как псевдоэлемент ::after для span. Я использовал CSS Triangle Generator для создания треугольника всплывающей подсказки.

.wrap { 
 
    overflow: auto; 
 
    padding: 10%; 
 
    width: 100%; 
 
    background: #eee; 
 
    box-sizing: border-box; 
 
} 
 

 
#circle1 { 
 
    display: block; 
 
    width: 52px; 
 
    height: 52px; 
 
    background: #f5e25d; 
 
    opacity: 0.9 -moz-border-radius: 50%; 
 
    -webkit-border-radius: 50%; 
 
    border-radius: 50%; 
 
    margin: 20px auto auto; 
 
    position: relative; 
 
} 
 

 
span.tooltip { 
 
    visibility: hidden; 
 
    position: absolute; 
 
    bottom: calc(100% + 20px); 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 200px; 
 
    background: #444; 
 
    color: white; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    border-radius: 4px; 
 
    text-align: center; 
 
    font-family: sans-serif; 
 
} 
 

 
span.tooltip::after { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    width: 0; 
 
    height: 0; 
 
    border-style: solid; 
 
    border-width: 10px 5px 0 5px; 
 
    border-color: #444444 transparent transparent transparent; 
 
} 
 

 
#circle1:hover span.tooltip { 
 
    visibility: visible; 
 
}

<div class="wrap"> 
 
    <a id="circle1"> 
 
    <span class="tooltip">Tooltip, baby, yeah!</span> 
 
    </a> 
 
</div>