Как изменить положение всплывающей подсказки стрелки

Question

Я пытаюсь переместить стрелку всплывающей подсказки в поле наведения налево слева - в настоящий момент она отображается в верхней части окна.

Вот мой CSS:

<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> 

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> 

Может кто-нибудь сказать мне, что я не хватает? Я не могу сказать, какой атрибут из кода контролирует положение стрелки ...

Спасибо.

Answer 1

Используйте следующие стили, чтобы переместить стрелку влево. Я сделал стрелку 6px для лучшей централизации, так как вы не можете отложить -2.5px.

.input:hover .tooltip:before { 
    display: block; 
    content:""; 
    position: absolute; 
    top: 50%; 
    margin-top:-3px; 
    left: -6px; 
    width: 0; 
    height: 0; 
    border-top: 6px solid transparent; 
    border-bottom: 6px solid transparent; 
    border-right: 6px solid blue; 
} 

Example

Answer 2

просто изменить этот класс

.input:hover .tooltip:before { 
    display: block; 
    content: ""; 
    position: absolute; 
    left: -5px; 
    top:50%; 
    margin-top:-5px; 
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-right: 5px solid blue; 

}