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;

}

如何更改工具提示箭头的位置

2 个答案: