CSS inline Tooltip

Question

Я ранее использовал этот код: Мои вопросы - как установить всплывающую подсказку для отображения встроенного (справа) с родительским div вместо выше.

Спасибо для смотреть его на

легче читать jsfiddle http://jsfiddle.net/SAYnZ/1/

HTML:

<div id="wrapper">START. 
    <div id="tooltip">GOOD LUCK !</div> 
</div> 

CSS:

#wrapper { 
cursor: pointer; 
position: fixed; 
text-transform: uppercase; 
background: #39AC9B; 
color: #FFFFFF; 
font-family: "Gill Sans", Impact, sans-serif; 
font-size: 30px; 
top: -webkit-calc(50% - 50px); 
left: -webkit-calc(50% - 137px); 
padding: 16px 25px; 
text-align: center; 
width: 250px; 
-webkit-transform: translateZ(0); /* webkit flicker fix */ 
-webkit-font-smoothing: antialiased; /* webkit text rendering fix */ 
} 

#wrapper #tooltip { 
background: #1496bb; 
bottom: 100%; 
color: #fff; 
display: block; 
left: -25px; 
margin-bottom: 15px; 
opacity: 0; 
padding: 20px; 
pointer-events: none; 
position: absolute; 
width: 100%; 
-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); 
} 

#wrapper #tooltip:before { 
bottom: -20px; 
content: " "; 
display: block; 
height: 20px; 
left: 0; 
position: absolute; 
width: 100%; 
    } 

#wrapper #tooltip:after { 
border-left: solid transparent 10px; 
border-right: solid transparent 10px; 
border-top: solid #1496bb 10px; 
bottom: -10px; 
content: " "; 
height: 0; 
left: 50%; 
margin-left: -13px; 
position: absolute; 
width: 0; 
    } 

#wrapper:hover #tooltip { 
opacity: 1; 
pointer-events: auto; 
-webkit-transform: translateY(0px); 
-moz-transform: translateY(0px); 
    -ms-transform: translateY(0px); 
    -o-transform: translateY(0px); 
     transform: translateY(0px); 
} 

Answer 1

Я обновил свой fiddle, просто установите

#wrapper #tooltip { 
... 
    top: -3px; 
    left: 100%; 
    color: #fff; 
    margin-left: 15px; 
... 

и сделать точку треугольника в правильное направление

Answer 2

Сделайте нижнюю = 20% в вашем # обертка #tooltip. Проверьте свою скрипку. Обновили его. К сожалению, если его не то, что вы хотите