CSS offset a tooltip - html

Question

I am trying to attach a tooltip to a button.
.hangup_button {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
}
.contained_message {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
.messageContain:hover .contained_message{
visibility: visible;
}
<div class="container_div">
<button class="hangup_button messageContain">
End Chat
<span class="contained_message">Terminate session. Charges stop accumulating.</span>
</button>
</div>
The problem I have is that the tooltip appears at the bottom of the button. I am trying to make it appear to the top of the button. So far, I tried to switch the <span class="contained_message"> to the top of the End Chat text. But the tooltip still exceeds the bottom of the button. I also tried to add position: relative; to .contained_message. That seems to mess up the whole button. What should I do in order for the tooltip to appear on top of the button, without exceeding the bottom of the button?

Answer 1

I added some changes to make it work:
Use position: relative on parent element.
Use transform: translate to get the desired placement, as well as top: -5px (can be 0, but -5 gives it a nice space)
I changed it to display: none / block instead of using visibility, as it may be more desirable (providad you are not looking to do transitions).
To center the tooltip horizontally, left: 50% with translate(-50%, ...) does the trick.
Working snippet:
.hangup_button {
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 25px;
margin-top: 80px;
position: relative;
}
.contained_message {
display: none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
transform: translate(-50%, -100%);
left: 50%;
top: -5px;
}
.messageContain:hover .contained_message{
display: block;
}
<div class="container_div">
<button class="hangup_button messageContain">
End Chat
<span class="contained_message">Terminate session. Charges stop accumulating.</span>
</button>
</div>