Making a simple tooltip with only HTML and CSS

Question

I want my tooltip element (the ) to appear above everything on the page but still relative to its parent element (the

Answer 1

Solution for tooltip ON TOP (always even if no space available)

.ht:hover .tooltip {
    display:block;
}

.ht{
  position: relative;
}
.tooltip {
    display: none;
    color: red;
    z-index: 1;
  position: absolute;
  top: -50%;
  transform: translatey(-50%);
}

Send reminders? 
 xaxaxa 
 xaxaxa 
 xaxaxa
this is the tooltip alshdgwh gahfguo 
wfhg fghwoug wugw hgrwuog hwaur guoarwhg 
 sdfaasdfrwu
 sdfaasdfrwu
 sdfaasdfrwu