CSS inline Tooltip

Question

I previously was using this code: My questions is how to set the tooltip to show up inline (to the right) with the parent div instead of above.

Thanks for looking it over

easier to read 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

I've updated your fiddle, just set

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

and make triangle point to right direction

Answer 2

Make the bottom=20% in your #wrapper #tooltip. Check your Fiddle. Have Updated it. Sorry if its not what you want