我对工具提示的翻译有问题。它必须出现然后向上翻译。但在我的代码中，它只出现......在我的代码中找不到什么问题......你知道吗？
演示：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;
}