css - :hover:after css tooltip and white-space issue

Question

场景描述如下:

.mainbox{
    width:150px;
}
.container{
    overflow-x: auto;
    white-space: nowrap; 
}
.position1{
    display: inline-block;
	width: 50px;
	height: 50px;
	margin: 2px;
	padding: 2px;
	background-color: #B6DEFC;
	border: 1px solid;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-color: #A8A8A8;
	position: relative;
	font-size: xx-small;
	cursor: pointer;
	white-space: normal;
}
.position1:hover:after{
	position: absolute;
	width: 100px;
	content: attr(data-title);
	border: 1px solid #FF0000;
	padding: 15px 5px 10px 5px;
	background: #FF9999;
	border-radius:5px;
	z-index: 1000;
	font-size: small;
}

<div class="mainbox">
<div class="container">
    <div class="position1" data-title="My data-title1"></div>
    <div class="position1" data-title="My data-title2"></div>
    <div class="position1" data-title="My data-title3"></div>
    <div class="position1" data-title="My data-title4"></div>
</div>
</div>

我希望工具提示 (:hover:after) 显示在 container 和 ma​​inbox 之外。我认为这是一个空白问题...

有人可以帮我解决这个问题吗？

提前谢谢你...

Answer 1

尝试

.position1:hover, .position1:after{
    position: absolute;
    width: 100px;
    content: attr(data-title);
    border: 1px solid #FF0000;
    padding: 15px 5px 10px 5px;
    background: #FF9999;
    border-radius:5px;
    z-index: 1000;
    font-size: small;