Databases
StackOverflow2013
Postsdbo
POCSS inline Tooltip
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCSS inline Tooltip
    text
    copied!<p>I previously was using this code: <strong>My questions is how to set the tooltip to show up inline (to the right) with the parent div instead of above.</strong> </p> <p>Thanks for looking it over</p> <p>easier to read jsfiddle <a href="http://jsfiddle.net/SAYnZ/1/" rel="nofollow">http://jsfiddle.net/SAYnZ/1/</a></p> <p>HTML:</p> <pre><code>&lt;div id="wrapper"&gt;START. &lt;div id="tooltip"&gt;GOOD LUCK !&lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>#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); } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload