<html><head></head><body style="text-align:center;"><!DOCTYPE html>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
height:200px;
background-color: #ccc;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
left: 105%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 6%;
right: 100%;
margin-top: -5px;
border-width: 7px;
border-style: solid;
border-color: transparent #ccc transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip"><input type="text"> <table class="tooltiptext"><tbody><tr><td></td></tr><tr></tr></tbody></table>
</div>
<input type="text">
</body></html>