title: Hide tooltip on hover?
body: <p><strong>We use tooltips, to display color names on a color picker.</strong> </p>
  
  <p>You can see the result here: <a href="http://printnil.com/products/urkundenmappe?variant=1010444983" rel="nofollow">www.printnil.com</a></p>
  
  <p>Unfortunately the tooltips does not work really good.</p>
  
  <p>The problem is, when you cursor is in the middle of the color picker and you move the cursor up to 
  a further color, the tooltip doesn not disappear.</p>
  
  <p>We need to find a solution to hide the tooltips, if you hover a new color or the the tooltip.</p>
  
  <p>...
  <em>We tried to move the tooltip upwards, so we get a little gap between the the color and the tooltip. But if you move the mouse faster you catch the transition effect.</em></p>
  
  <p><strong>Maybe some JavaScript?</strong></p>
  
  <pre><code>/** Color Swatches **/ 
  
  
  .swatch { 
    float: left;
    width: 100%;
    margin: 0px 0px 10px 0px;
  }
  
  .swatch .header {
    margin: 0.5em 0; 
  }
  
  .swatch input { 
    display:none;
  }
  
  .swatch label {
    width: 100%;
    height: 40px;
    float:left;
    margin:0;
  }
  
  .swatch-element label {
    cursor: pointer;
  }
  
  .swatch .swatch-element {
    width: 20%;
    height: 40px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;    
    box-sizing: border-box;        
    float:left;
    -webkit-transform:translateZ(0); 
    -webkit-font-smoothing:antialiased; 
    position:relative;
  }
  
  .swatch input:checked + label {
    text-align: center;
    width: 100%;
  }
  
  
  .swatch input:checked + label:before {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e607";
    line-height: 40px;
    font-size: 15px;
    color: #fff;
    background: rgba(0,0,0,0.45);
    padding: 6px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;   
  }
  
  .swatch .tooltip {
    font: normal 12px sans-serif;
    text-align:center;
    background: #27282b;
    color:#fff;
    bottom:100%;
    padding:  10px;
    display:block;
    position:absolute;
    width:140%;
    left: -20%;
    margin-bottom:15px;
    filter:alpha(opacity=0);
    -khtml-opacity: 0;
    -moz-opacity: 0;
    opacity:0;
    visibility:hidden;
    -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);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;        
    z-index: 10000;
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box;
  }
  
  .swatch .tooltip:before {
    bottom:-20px;
    content:" ";
    display:block;
    height:20px;
    left:0;
    position:absolute;
    width:100%;
  }
  
  .swatch .tooltip:after {
    border-left:solid transparent 10px;
    border-right:solid transparent 10px;
    border-top:solid #27282b 10px;
    bottom:-9px;
    content:" ";
    height:0;
    left:50%;
    margin-left:-13px;
    position:absolute;
    width:0;
  }
  
  .swatch .swatch-element: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);
  }
  
  
  /** Color Swatches **/   
  </code></pre>