html - 悬停状态时在按钮底部显示工具提示

Question

这是我的网站link

在按钮的第一行，当悬停时，显示工具提示并隐藏一些背景图像。

所以我只需要在第一行显示按钮的底部。

我试过这个 CSS:

.swatch .tooltip, .bullet li .tooltip{
  text-align:center;
  background:gray;
  color:#fff;
  bottom:80%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 0px;
  padding-right: 0px;
  display:block;
  position:absolute;
  width:100px;
  left:-23px;
  margin-bottom:10px;
  /* Make it invisible by default */
  filter:alpha(opacity=0);
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity:0;
  visibility:hidden;
  /* Animations */
  -webkit-transform: translateY(10px);
     -moz-transform: translateY(10px);
      -ms-transform: translateY(10px);
       -o-transform: translateY(10px);
          transform: translateY(10px);
  -webkit-transition: all .25s ease-out;
     -moz-transition: all .25s ease-out;
      -ms-transition: all .25s ease-out;
       -o-transition: all .25s ease-out;
          transition: all .25s ease-out;
  -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
     -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
      -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
       -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
          box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
  z-index: 10000;
  -moz-box-sizing:border-box; 
  -webkit-box-sizing:border-box; 
  box-sizing:border-box;
}
.swatch .tooltip:before, .bullet li .tooltip:before {
  bottom:-20px;
  content:" ";
  display:block;
  height:20px;
  left:0;
  position:absolute;
  width:100%;
}
/* CSS triangle */
.swatch .tooltip:after, .bullet li .tooltip:after {
  border-left:solid transparent 10px;
  border-right:solid transparent 10px;
  border-top:solid gray 10px;
  bottom:10px;
  content:" ";
  height:0;
  left:50%;
  margin-left:-13px;
  position:absolute;
  width:0;

}
.swatch .swatch-element:hover .tooltip, .bullet li:hover .tooltip {
  filter:alpha(opacity=100);
  -khtml-opacity:1;
  -moz-opacity:1;
  opacity:1;
  visibility:visible;
  -webkit-transform:translateY(0px);
     -moz-transform:translateY(0px);
      -ms-transform:translateY(0px);
       -o-transform:translateY(0px);
          transform:translateY(0px);
}
.bullet li .tooltip{left:-30px;font-family:lato;font-size:15px;}

我可以知道，我该怎么做吗？

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

您只需更改工具提示的位置即可。

我改变了箭头方向(从border-top 到border-bottom):

border-bottom-color: #000;
border-bottom-color: hsla(0, 0%, 20%, 0.9);

我还改变了工具提示本身的位置:

bottom: -60px;

这是工作 fiddle :http://jsfiddle.net/alessiozuccotti/zbbf7cp2/3/

如果您希望它只影响第一行，请在这些元素上应用一个类，或者，如果您将它们分组为行(不同的元素)，请在第一行添加一个类，以便您可以定位子元素。