Stu Nicholls's tooltip outside the box

by AnneL

HTML

<p><a href="http://onzeautovakantiesinnoorwegen.nl/" target="_blank">onzeautovakantiesinnoorwegen.nl</a></p>
<p>Source of the tooltip = <a href="http://www.cssplay.co.uk/menu/cssplay-tooltips.html" target="_blank">cssplay.co.uk/menu/cssplay-tooltips.html</a></p><p>Stu Nicholls's ORIGINAL MODIFIED | attempting to create a 'tooltip topCenter colGhostWhite' outside the box called 'scrolling-wrapper'</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>Showing the results of a non-professional ...</p>

<div class="scrolling-wrapper">

    <span class="tooltip topCenter colGhostWhite" onmouseover = "void(0)"><a href="ifr/deel_1_fotos.html" target="_self"><img src="http://onzeautovakantiesinnoorwegen.nl/signs/open.gif" width="25" height="106" class="foto" style="background:#dfffbd; border-width:1px;" alt=""></a><span><b><span class="iPadNot">Met uw muis boven een foto verschijnt er een tooltip<br><br>Klikt u op een foto,&nbsp; dan vindt u het bijbehorende verhaal</span><br class="iPadNot"><br class="iPadNot">Wilt u alle foto's van deze pagina bekijken?<br><span class="iPadNot">Klik</span><span class="iPadOnly">Tik</span> dan <span class="iPadOnly">met 1 vinger</span> op het &nbsp;<img src="http://onzeautovakantiesinnoorwegen.nl/signs/navmenuarrow.gif" class="x9x8" alt="">&nbsp;&nbsp;&nbsp;<img src="http://onzeautovakantiesinnoorwegen.nl/signs/navmenuarrow.gif" class="x9x8" alt="">&nbsp;&nbsp;&nbsp;<img src="http://onzeautovakantiesinnoorwegen.nl/signs/navmenuarrow.gif" class="x9x8" alt="">&nbsp; &mdash; balkje<i>&nbsp;</i></b></span></span><img class="close" src="http://onzeautovakantiesinnoorwegen.nl/signs/tooltip.gif" alt="">

<span class="tooltip topCenter colGhostWhite" onmouseover = "void(0)"><a href="http://onzeautovakantiesinnoorwegen.nl/deel_1.html#aan land" target="_self"><img src="http://onzeautovakantiesinnoorwegen.nl/fo_d1/dk_superspeed.jpg" width="241" height="100" class="foto" alt="Foto van SuperSpeed 1, colorlineferries in Noorwegen"></a><span><b>SuperSpeed 1, vaart in...

CSS

.scrolling-wrapper
								{	border:1px solid; /* temporary */
                                    width:auto; height:156px; margin:0 37px 20px 37px;
									white-space:nowrap;
									overflow-y:hidden; overflow-x:scroll; }
.scrolling-wrapper a,
.iPadNot,
.iPadOnly
								{	display:-moz-inline-stack;
										/*	hack FF2 | bron:http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
									display:inline-block; zoom:1; *display:inline; }
										/*	origineel = inline; > inline-block nodig voor Safari en Chrome
												zoom en *display = hack IE6&7 | bron:http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
.iPadOnly
								{	display: none !important; }

/*	iPads (portrait and landscape) */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
								{
									.scrolling-wrapper
																					{	height:201px; }
									.iPadNot
																					{	display:none !important; }
									.iPadOnly 
																					{	display:inline-block !important; }
								}


/*	tooltip = www.cssplay.co.uk/menu/cssplay-tooltips.html */
span.tooltip	
													{	cursor:default; z-index:100; }


span.tooltip > span
													{	display:none; position:absolute; border:2px solid #080; background:#fff;
														box-shadow:0 15px 10px -15px rgba(0,0,0,0.7); z-index:100; }
span.topLeft > span
													{	border-radius:0 20px 0 20px; right:50%; bottom:40px; }

/* Stu Nicholls's ORIGINAL MODIFIED | attempting to create a 'tooltip topCenter colGhostWhite' outside the box called 'scrolling-wrapper' */
/**/span.topCenter > span
													{	border-radius:none; top:80px; left:30%;
														/*	left = in relation to 'width' of: span.colGhostWhite span b */ }


/**/span.colGhostWhite > span
													{	border:none; }
span.colGreen > span
													{	border-color:#080; }


span.tooltip span b
													{	display:block; background:#080; *width:100%; margin:2px; padding:10px;...