如何在我們懸停比按鈕大的按鈕時顯示文本？

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%; 
}