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

【问题标题】：How to display a text when we hover a button who is bigger than the button?当我们悬停比按钮大的按钮时如何显示文本？
【发布时间】：2017-03-20 08:45:43
【问题描述】：

当我将光标放在特定按钮上时，我想显示一个文本来帮助用户。

看过之后我发现我可以做到：

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

【问题讨论】：

标签： html css button text

【解决方案1】：

在伪元素上使用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%;
    position:relative;
}

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

&lt;button class=stopAll&gt;A&lt;/button&gt;

【讨论】：

在我的情况下，它只是将文本堆叠在按钮之后，但与我的第一张图片具有相同的外观。力金的解决方案奏效了
但这和我的答案是一样的。
是的，现在你编辑了它，所以我会因为质量而接受你的

【解决方案2】：

你可以使用，

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

【讨论】：

好的。您可以通过向左或向右更改位置来更改位置。