Put a tooltip on css shape - css

Question

I have circle shapes that are made of CSS, i'm trying to put a tool-tip that appears when i hover into the circle, any ideas on how to do that?
Here is my circle code:
#circle1 {
width: 52px;
height: 52px;
background: #f5e25d;
opacity: 0.9
-moz-border-radius: 50%;
-webkit-border-radius: 50px;
border-radius: 50px;
}
<div id="circle1"></div>

Answer 1

You can achieve this by putting an HTML element inside #circle1 (I used a span) for the tooltip, and using #circle1:hover to display the tooltip. Then I put a triangle as the ::after pseudo-element for the span. I used a CSS Triangle Generator to create the tooltip triangle.
.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>