Unable to align tooltip properly with multiple tooltip message - html

Question

.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: -15px;
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;
}
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<ul class="tooltiptext">
<li>Tooltip text 1</li>
<li>Tooltip text 2</li>
<li>Tooltip text 3</li>
</ul>
</div>
Works perfectly with one Tooltip message, but not with multiple message.
It should always be vertically center regardless the no of tooltip messages.
Feel free to ask question if anyone didn't understand the scenario.

Answer 1

Instead of using margin values to adjust / place the toopltip.
Use top:50% and a transform to vertically center by dragging it back up 50% of its own height.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
margin-top: 50px;
}
.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: 50%;
transform: translateY(-50%);
left: 120%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover over me
<ul class="tooltiptext">
<li>Tooltip text 1</li>
<li>Tooltip text 2</li>
<li>Tooltip text 3</li>
</ul>
</div>
<br/>
<div class="tooltip">Hover over me
<ul class="tooltiptext">
<li>Tooltip text 1</li>
</ul>
</div>