sorting-hat/static/styles.css
.jumbotron{
    position: relative;
    padding-top:1px !important;
    padding-bottom:10px !important;
    /*padding:0 !important;*/
    margin-top:0px !important;
    background: #eee;
    margin-top: 23px;
    margin-bottom: 0 !important;
}
.sublead {
  font-size: 20px;
}


.advanced_show {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.advanced_content {
    display: none;
}
.advanced_show:checked ~ .advanced_content {
    display: block;
}



[tooltip]{
    position:relative;
    border-bottom:1px dashed #ccc;
    color:#322;
    font-weight: bold;
}

[tooltip]:before{   /* make it present but transparent */
    content:attr(tooltip);
    border-radius: 5px;
    background:#666;
    opacity:0.0;
    color:white;
    font-size:smaller;
    pointer-events:none;
    top:110%;
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 350px;
}

[tooltip]:hover:before{   /* on hover make it visibile */
    opacity:1;
}

[tooltip]:hover:after {   /* the triagular arrow part */
    background:#fff;
    border: solid;
    border-color: #666 transparent;
    border-width: 0px 6px 6px 6px;
    bottom: -2px;
    content: "";
    left: 40%;
    position: absolute;
    z-index: 99;
}

.img-tooltip{
  font-weight: bold;
  border-bottom:1px dashed #ccc;
}
.ideamg-tooltip:before {
  background:#666;
  opacity:0.0;
  color:white;
  font-size:smaller;
  pointer-events:none;
  top:110%;
  left: 20%;
  padding: 5px 15px;
  position: absolute;
  z-index: 98;
  width: 350px;
}
.img-tooltip.:hover:before {
   opacity: 1;
 }
.img-tooltip:hover {
    position: relative;
}
.img-tooltip:hover:after {
  content: url("SampleSamples.png"); /* no need for qoutes */
  display: block;
  position:absolute;
  left: 123px; /* change this value to one that suits you */
  top: 56px; /* change this value to one that suits you */

}
