css - 为什么标题工具提示不适用于浮动元素？

Question

我有一个浮动元素，其全部目的是显示一个“x”，表示您可以删除一些东西：

.remove_button{
background-color:#ff3300;
color:#ffffff;
font-family:Courier New,sans-serif;
font-weight:900;
font-size:20px;
float:right;
border-radius:5px;
padding:0px 6px 0px 6px;
margin-right:15px;
}

<div class="remove_button" title="Remove">x</div>

它确实在红色背景上显示了一个整洁的小“x”（无需制作图片，我不擅长），但问题是当鼠标悬停在按钮上时，标题属性会显示在按钮内，并作为工具提示：

------xRemove------   one '-' is one pixel of padding

Answer 1

尝试这个，

.remove_button{
background-color:#ff3300;
color:#ffffff;
font-family:Courier New,sans-serif;
font-weight:900;
font-size:20px;
float:right;
border-radius:5px;
padding:0px 6px 0px 6px;
margin-right:15px;
position:relative;
}

​ .tip{ 位置：绝对；显示：无；边框：1px 实心#aab; 背景：#eef; 填充：0 3px；左：15px；顶部：25px；}

.remove_button:hover .tip{
display:block;
}

​​​​​​​​​​​​</p>