My current challenge involves repositioning the Tooltip arrow on my hover box to the left side, as it currently appears at the top of the box.
This is the CSS I am using:
<style type="text/css">
* {
font-family: Arial;
}
.input {
position: relative;
}
.tooltip {
display: none;
padding: 10px;
}
.input:hover .tooltip {
background: blue;
border-radius: 3px;
bottom: -5px;
color: white;
display: inline;
height: 30px;
width: 100px;
left: 60px;
line-height: 60px;
position: absolute;
}
.input:hover .tooltip:before {
display: block;
content: "";
position: absolute;
top: -5px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid blue;
}
</style>
And here is the corresponding HTML:
<td align="left">
<tr>
<br><br><br><br>
</tr>
<div class="input" align="left">
<input name="amount1" type="text" align="top" class="size-box" id="amount" style="font-size: 14px; width:40px; text-align:center" onclick="this.value = '';" value="0" size="20"><span class="tooltip" style="text-align:center">Deliver Quantity</span></div>
</td>
I'm struggling to determine which attribute in the code controls the arrow position. Any insights or help would be greatly appreciated.
Thank you!