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

Question

我有一个浮动的元素，其目的是显示一个＆＃39; x＆＃39;表示您可以删除某些内容：

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

它显示了一个整洁的小＆＃39; x＆＃39;在红色背景上（不需要拍照，我对此不好），但问题是当鼠标悬停在按钮上时，标题属性显示在按钮内部，并且作为工具提示：< / p>

------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 {     位置：绝对的;     显示：无;     border：1px solid #aab;     背景：#eef;     填充：0 3px;     左：15px的;     顶部：25像素;     }

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