html - display tooltip bottom of the button when hover state -

here website link

in first row of button,, when hover, tooltip displayed , hidden background image.

so need display bottom of button first row.

i tried 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 invisible 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: .25s ease-out;      -moz-transition: .25s ease-out;       -ms-transition: .25s ease-out;        -o-transition: .25s ease-out;           transition: .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;} 

may know, how can this?

any highly appreciated.

thanks in advance.

you have change position of tooltip.

i've changed arrow direction (from border-top border-bottom):

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

and i've changed position of tooltip itself:

bottom: -60px; 

here's working fiddle: http://jsfiddle.net/alessiozuccotti/zbbf7cp2/3/

if want affect first row, apply class on these elements or, if they're grouped rows (different element) add class on first row can target children.