如何在我们悬停比按钮大的按钮时显示文本？

Question

我想在显示一个文本，当我有一个特定的按钮来帮助用户的光标。

考虑看看我发现我能做到这一点之后：

.stopAll { 
    width: 20px; 
    height: 20px; 
    margin-top: 10px; 
    margin-left: 5%; 
    margin-bottom: 10px; 
    background: url('/stopAll.gif'); 
    background-position: center; 
    background-repeat: no-repeat; 
    background-size: 100%; 
} 

.stopAll:hover:before { 
    content: 'Stop all running containers'; 
} 

，其结果是：

我想显示一行文字，你能不能帮我 ？

[编辑]也许我应该显示HTML也因此是这样的：

<ul class="nav navbar-right panel_toolbox"> 
    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> 
    </li> 
    <li class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> 
    <ul class="dropdown-menu" role="menu"> 
     <li><a id="allCtn">All containers</a> 
     </li> 
     <li><a id="rngCtn">Only running containers</a> 
     </li> 
     <li><a id="psdCtn">Only paused containers</a> 
     </li> 
     <li><a id="stpCtn">Only stopped containers</a> 
     </li> 
     <li><a id="extCtn">Only exited containers</a> 
     </li> 
     <li><a id="crtCtn">Only created containers</a> 
     </li> 
    </ul> 
    </li> 
    <li><button type="button" class="stopAll {{#unless urgence}}hidden{{/unless}}"> </button> 
    </li> 
    <li><a class="close-link"><i class="fa fa-close"></i></a> 
    </li> 
</ul> 

Answer 1

使用伪元素

.stopAll { 
 
    width: 20px; 
 
    height: 20px; 
 
    margin-top: 10px; 
 
    margin-left: 5%; 
 
    margin-bottom: 10px; 
 
    background: url('/stopAll.gif'); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-size: 100%; 
 
    position:relative; 
 
} 
 

 
.stopAll:hover:before { 
 
    content: 'Stop all running containers'; 
 
    position: absolute; 
 
    white-space: nowrap; 
 
    top:100%; 
 
}

<button class=stopAll>A</button>

Answer 2

您可以使用上position: absolute;和white-space: nowrap;，

.stopAll { 
width: 20px; 
height: 20px; 
margin-top: 10px; 
margin-left: 5%; 
margin-bottom: 10px; 
background: url('/stopAll.gif'); 
background-position: center; 
background-repeat: no-repeat; 
background-size: 100%; 
display:block; 
position:relative; 
} 
.stopAll:hover:before { 
content: 'Stop all running containers'; 
position:absolute; 
right:0; 
white-space: nowrap; 
top:100%; 
}