css - CSS 翻訳が機能しない

Question

ツールチップの翻訳に問題があります。表示されてから上に翻訳する必要があります。しかし、私のコードではそれしか表示されません...私のコードで何が間違っているのかわかりません...アイデアはありますか?

デモ: http://jsfiddle.net/RWYeF/

コード：

.bulle_abo, .combulle {
    border: 1px solid #909090;
    bottom: 100%;
    color: #fff;
    display: block;
    left: -114px;
    margin-bottom: 15px;
    opacity: 0;
    display:none;
    padding: 20px;
    pointer-events: none;
    position: absolute;
    min-width: 250px;
    -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: 0 0 8px 2px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
    -ms-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
    -o-box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 1);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background: #ffffff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(2%, #c9c9c9), color-stop(53%, #606060));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #c9c9c9 2%, #606060 53%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffffff 0%, #c9c9c9 2%, #606060 53%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#606060', GradientType=0);
    /* IE6-9 */
}
.combulle {
    margin-left: -36px;
}
/* This bridges the gap so you can mouse into the tooltip without it disappearing */
 .bulle_abo:before, .combulle:before {
    bottom: -20px;
    content:" ";
    display: block;
    height: 20px;
    left: 0;
    position: absolute;
    width: 100%;
}
/* CSS Triangles - see Trevor's post */
 .bulle_abo:after, .combulle:after {
    background: url(/themes/glace_et_ombre/images/flbas.png) no-repeat;
    bottom: -20px;
    content:" ";
    height: 20px;
    left: 144px;
    margin-left: -13px;
    position: absolute;
    width: 20px;
}
.enveloppe_abo:hover .bulle_abo, .enveloppe_bulaut:hover .combulle {
    opacity: 0.95;
    display:block;
    pointer-events: auto;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px);
}
/* IE can just show/hide with no transition */
 .lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
    display: none;
}
.lte8 .enveloppe_abo .bulle_abo, lte8 .enveloppe_bulaut .combulle {
    display: block;
}
a.lien_bulle:link, a.lien_bulle:active, a.lien_bulle:visited {
    color: rgb(0, 78, 194);
    text-shadow: 0 1px 3px rgb(255, 255, 255);
    font-size: 18px;
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
}
a.lien_bulle:hover {
    color: rgb(228, 235, 255);
    text-shadow: 0 1px 0 #000;
}
.all_abo {
    position: relative;
    display: block;
    float: left;
    padding-left: 2px;
}
.avatar_abo_bulle {
    float: left;
    position: relative;
    height: 68px;
    width: 68px;
    display: block;
    overflow: hidden;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    box-shadow: 0px 0px 8px 1px #000;
    -webkit-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 1);
}
.texte_abo_bulle {
    margin-left: 90px;
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
}
.enveloppe_abo {
    position: relative;
    float: left;
    display: block;
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    z-index:11;
}
.enveloppe_bulaut {
    position: relative;
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
}