<!DOCTYPE html>
<html lang="en">
<head>
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<!--[if lt IE 9]>
 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

<title> Stu Nicholls | CSS PLAY | Tooltips version 3 for iPad etc. </title>
<meta name="Author" content="Stu Nicholls">
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, tooltip, popup, information, css3, iPad" />
<meta name="Description" content="CSS play - adding pop-up tool tips to inline text and links" />

<meta name="msapplication-TileImage" content="/cssplay-tile.png">
<meta name="application-name" content="CSS play">
<meta name="msapplication-TileColor" content="#006699">

<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=">
<meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.classify.org/safesurf/" L gen true for "http://www.cssplay.co.uk" r (SS~~000 1))'>
<link rel="meta" href="../labels.rdf" type="application/rdf+xml" title="ICRA labels">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="../feed.xml">
<meta http-equiv="imagetoolbar" content="no">
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
<link rel="icon" href="../favicon.ico" type="image/ico">

<meta name="alexaVerifyID" content="NxZdT78RYs2r1JgJ_Sf4nE-uiaU">
<link rel="P3Pv1" href="../w3c/p3p.xml">

<script src='../javascript/prettify.js'></script>
<link href='../lato-font/stylesheet.css' rel='stylesheet' type='text/css'>
<link href='../stylesheets/main.css' rel='stylesheet' type='text/css'>
<style>

.textPanel {width:90%; margin:20px 0; font-family:'georgia', serif; padding:25px; background:#eee;}
.textPanel img {float:left; padding:0 10px 10px 0;}

span.tooltip {padding:0 5px; background:#cdc; 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.bottomRight > span {border-radius:0 20px 0 20px; left:50%; top:40px;}
span.bottomLeft > span {border-radius:20px 0 20px 0; right:50%; top:40px;}
span.topRight > span {border-radius:20px 0 20px 0; left:50%; bottom:40px;}
span.topLeft > span {border-radius:0 20px 0 20px; right:50%; bottom:40px;}

span.colRed > span {border-color:#c00;}
span.colBlue > span {border-color:#008;}
span.colGreen > span {border-color:#080;}
span.colViolet > span {border-color:#606;}

span.tooltip span b {display:block; background:#080; *width:100%; margin:2px; padding:10px; color:#fff; position:relative; z-index:100; overflow:hidden; font:normal 14px/20px 'georgia', serif;
box-shadow:inset 2px 2px 5px rgba(255, 255, 255, 0.5), inset -2px -2px 5px rgba(0, 0, 0, 0.5);
}
span.bottomRight span b {border-radius:0 18px 0 18px;}
span.bottomLeft span b {border-radius:18px 0 18px 0}
span.topRight span b {border-radius:18px 0 18px 0;}
span.topLeft span b {border-radius:0 18px 0 18px;}

span.colRed span b {background:#c00;}
span.colBlue span b {background:#008;}
span.colGreen span b {background:#080;}
span.colViolet span b {background:#606;}

span.tooltip > span:before {display:block; content:""; width:20px; height:20px; background:transparent; position:absolute;}
span.bottomRight > span:before {top:-20px; left:-2px;}
span.bottomRight.colRed > span:before {background:url(painters/red-corner.png) no-repeat -20px 0;}
span.bottomRight.colBlue > span:before {background:url(painters/blue-corner.png) no-repeat -20px 0;}
span.bottomRight.colGreen > span:before {background:url(painters/green-corner.png) no-repeat -20px 0;}
span.bottomRight.colViolet > span:before {background:url(painters/violet-corner.png) no-repeat -20px 0;}

span.bottomLeft > span:before {top:-20px; right:-2px;}
span.bottomLeft.colRed > span:before {background:url(painters/red-corner.png) no-repeat 0 0;}
span.bottomLeft.colBlue > span:before {background:url(painters/blue-corner.png) no-repeat 0 0;}
span.bottomLeft.colGreen > span:before {background:url(painters/green-corner.png) no-repeat 0 0;}
span.bottomLeft.colViolet > span:before {background:url(painters/violet-corner.png) no-repeat 0 0;}

span.topRight > span:before {bottom:-20px; left:-2px;}
span.topRight.colRed > span:before {background:url(painters/red-corner.png) no-repeat -20px -20px;}
span.topRight.colBlue > span:before {background:url(painters/blue-corner.png) no-repeat -20px -20px;}
span.topRight.colGreen > span:before {background:url(painters/green-corner.png) no-repeat -20px -20px;}
span.topRight.colViolet > span:before {background:url(painters/violet-corner.png) no-repeat -20px -20px;}

span.topLeft > span:before {bottom:-20px; right:-2px; border-width:0 2px 0 0;}
span.topLeft.colRed > span:before {background:url(painters/red-corner.png) no-repeat 0 -20px;}
span.topLeft.colBlue > span:before {background:url(painters/blue-corner.png) no-repeat 0 -20px ;}
span.topLeft.colGreen > span:before {background:url(painters/green-corner.png) no-repeat 0 -20px;}
span.topLeft.colViolet > span:before {background:url(painters/violet-corner.png) no-repeat 0 -20px;}

span.colRed > span:before {border-color:#c00;}
span.colBlue > span:before {border-color:#008;}
span.colGreen > span:before {border-color:#080;}
span.colViolet > span:before {border-color:#606;}

span.tooltip span b:before {display:block; content:""; width:80%; height:50px; background:transparent; border-radius: 100% / 50px ; position:absolute; left:10%; top:-30px; z-index:200;
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}

span.tooltip:hover {position:relative; z-index:100;}
span.tooltip:hover > span {display:block; white-space:nowrap;}

span.tooltip + img.close {position:fixed; left:0; top:0; width:0; height:0; z-index:99;}
span.tooltip:hover + img.close {width:100%; height:100%;}

</style>

<!--
<style>
	@media only screen and (max-width:480px) {
	.balloon {display:none;}
	#info h3.smartphone {display:block;}
	}
</style>
-->


<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-451410-1', 'auto');
ga('send', 'pageview');
</script>
</head>

<body id="www-cssplay-co-uk" class="demos"><div onClick="this.style.display='none';"><div style="display:block; clear:both; height:1.5em; padding:0.5em;">&nbsp;</div><div style="position:absolute; top:0px; left:0px; display:block; position:fixed; width:100%; padding:0.5em; line-height:1.5em; background-color:#BE0000; color:#FFF; font-family:Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace; font-size:13px; z-index:2147483640; cursor:pointer; " title="click to hide message">Please note, this is a STATIC archive of website www.cssplay.co.uk from 19 Oct 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.</div></div>

<script async type="text/javascript" src="http://cdn.fancybar.net/ac/fancybar.js?zoneid=1502&amp;serve=C6ADVKE&amp;placement=cssplay" id="_fancybar_js"></script>

<header><img src="../new-images/mobile-friendly.png" title="Mobile Friendly Website" alt="Mobile Friendly Website">
	<h1><span>C</span><span>S</span><span>S</span>PLAY</h1>
	<p>Doing it with style</p>
</header>
<ul class="main">
	<li id="home"><a href="../index.html">HOME</a></li>
	<li id="demos"><a href="index.html">DEMOS</a></li>
	<li id="menus"><a href="../menus/index.html">MENUS</a></li>
	<li id="layouts"><a href="../layouts/index.html">LAYOUTS</a></li>
	<li id="boxes"><a href="../boxes/index.html">BOXES</a></li>
	<li id="mozilla"><a href="../mozilla/index.html">MOZILLA</a></li>
	<li id="explorer"><a href="../ie/index.html">EXPLORER</a></li>
	<li id="opacity"><a href="../opacity/index.html">OPACITY</a></li>
</ul><div id="wrapper" onclick="">


<section id="tutorial">

<div id="info">
	<h2><a href="index.html">CSS DEMOS</a> &#155; <span class="break"></span>Tool Tips on inline text and links</h2>
	<h5 class="date">Date : 8th October 2012</h5>
	<h4>For all modern browsers</h4>
<br><br><br>

<!-- <h3 class="smartphone">This demo is too wide for your mobile screen.<br>Please view on a tablet or PC.</h3> -->

<div class="textPanel">
<h1>Claude Monet</h1>
<p>His youth was spent in Le Havre, where he first excelled as a caricaturist but was then converted to landscape painting by his early mentor <span class="tooltip topRight colRed" onmouseover = "void(0)">Boudin<span><b>One of the first French<br />landscape painters to<br />paint in the open air.</b></span></span><img class="close" src="painters/transparent.gif" alt="" />, from whom he derived his firm predilection for painting out of doors.</p>
<img src="painters/monet.jpg" alt="Women in the Garden" title="Women in the Garden" />
<p>In 1859 he studied in Paris at the Atelier Suisse and formed a friendship with <span class="tooltip topLeft colGreen" onmouseover = "void(0)"><a href="http://www.ibiblio.org/wm/paint/auth/pissarro/">Pissarro</a><span><b>French Impressionist painter, who endured<br />prolonged financial hardship in keeping faith<br />with the aims of Impressionism.</b></span></span><img class="close" src="painters/transparent.gif" alt="" />. After two years' military service in Algiers, he returned to Le Havre and met <span class="tooltip bottomLeft colBlue" onmouseover = "void(0)">Jongkind<span><b>Painter and printmaker whose small,<br />informal landscapes continued the<br />tradition of the Dutch landscapists.</b></span></span><img class="close" src="painters/transparent.gif" alt="" />, to whom he said he owed `the definitive education of my eye'.</p>
<p>He then, in 1862, entered the studio of Gleyre in Paris and there met Renoir, Sisley, and Bazille, with whom he was to form the nucleus of the Impressionist group.</p> 
<p>Monet's devotion to painting out of doors is illustrated by the famous story concerning one of his most ambitious early works, Women in the Garden (Mus&#233;e d'Orsay, Paris; 1866-67). The picture is about 2.5 meters high and to enable him to paint all of it outside he had a trench dug in the garden so that the canvas could be raised or lowered by pulleys to the height he required.</p>

<p><span class="tooltip bottomRight colViolet" onmouseover = "void(0)">Courbet<span><b>The painter Courbet started and dominated<br />the French movement toward realism.</b></span></span><img class="close" src="painters/transparent.gif" alt="" /> visited him when he was working on it and said Monet would not paint even the leaves in the background unless the lighting conditions were exactly right.</p>
<p>This text is an excerpt from <span class="tooltip topLeft colBlue" onmouseover = "void(0)">The&nbsp;WebMuseum,&nbsp;Paris<span><b>The WebMuseum has been designed<br />for academic, educational use.</b></span></span><img class="close" src="painters/transparent.gif" alt="" /></p>
</div>

<br><br>


		<ins class="adsbygoogle adslot_1"
	 data-ad-client="ca-pub-6651950180071236"
	 data-ad-slot="3056876056"></ins>
	<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	<div class="demoNav">
		<a href="tooltips.html" title="Previous Demonstration" class="prevDemo">Previous Demo</a>
		<a href="tool_links.html" title="Next Demonstration" class="nextDemo">Next Demo</a>
	</div>

	<h3 class="information">Information</h3>
<p>It has been 5 years since I produced my original tooltips demo so I think that it is time for an update.</p>
<p>This demo uses the latest css3 techniques to produce the popup tooltip and has also fixed problems with having css tooltips on the Safari mobile browser where the tooltip does not close once it has 'popped up'.</p>
<p>The tooltip could have been produce without any images but this would have required using styles that are not currently supported by IE9. So I have use images for the pointers.</p>
<p>I have also made it easy to change the colors and positions of the tooltips to ensure that they do not go outside of the page content.</p>
<p>The iPad, iPhone and iPod Touch require adding <b>onmouseover = "void(0)"</b> to the tooltip span so that a 'tap' on this text will trigger a <b>:hover</b> and also requires the addition of a transparent gif <b>&lt;img class="close" src="painters/transparent.gif" alt="" /&gt;</b> after the tooltip span to provide a means of closing any tooltip by 'tapping' anywhere on the screen.</p>

<br>

		<ins class="adsbygoogle adslot_1"
	 data-ad-client="ca-pub-6651950180071236"
	 data-ad-slot="3056876056"></ins>
	<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
	<h3 class="copyright">Copyright</h3>
<p class="bold">Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.</p>
<ol class="numberlist">
<li>If you are using this on a personal web site then please retain the copyright comment in the stylesheet.<br>A support donation is now required for this demonstration.</li>
<li>If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and again a support donation is required.</li>
<li>If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.</li>
</ol>


</div>

<div id="rightCol">
	<div class="boxTop">
		<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
		<ins class="adsbygoogle"
			 style="display:inline-block;width:300px;height:250px"
			 data-ad-client="ca-pub-6651950180071236"
			 data-ad-slot="4755057509"></ins>
		<script>
		(adsbygoogle = window.adsbygoogle || []).push({});
		</script>
	</div>
	<div class="box300 col1">
		<h3 class="support">Support <span>C</span><span>S</span><span>S</span>PLAY</h3>
		<div style="width:220px; margin:0 auto;">
			<form inert action="https://www.paypal.com/cgi-bin/webscr" method="post">
				<div>
					<input type="hidden" name="cmd" value="_s-xclick"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
					<input type="hidden" name="hosted_button_id" value="3206316"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
					<input type="image" src=".. placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /new-images/paypal.png" name="submit" alt="PayPal - The safer, easier way to pay online." />
					<img alt="" src="https://www.paypal.com/en_GB/i/scr/pixel.gif" width="1" height="1" />
				</div>
			</form>
		</div>
		<p>Your donations keep CSS PLAY running.<br>If your donation is for the use of a demo then please email me with the demo url after making your donation.</p>
	</div>

	<div class="box300 col3">
		<br>
		<div class="cse-branding-right">
			<div class="cse-branding-form">
				<form inert action="http://www.cssplay.co.uk/search.html" id="cse-search-box">
					<div>
						<input type="hidden" name="cx" value="partner-pub-6651950180071236:chrtwm-4ria" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" >
						<input type="hidden" name="cof" value="FORID:10" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" >
						<input type="hidden" name="ie" value="UTF-8" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" >
						<input type="text" name="q" class="search" placeholder="disabled" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" >
						<input type="submit" name="sa" value="" class="cse-search" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" >
					</div>
				</form>
			</div>
			<div class="cse-branding-logo">
				<img src="http://www.google.com/images/poweredby_transparent/poweredby_CCCCCC.gif" alt="Google">
			</div>
			<div class="cse-branding-text" style="color:#333; font:normal 12px/25px 'latomedium', arial, sans-serif; margin-top:-10px;">
				CUSTOM SEARCH
			</div>
		</div>
	</div>

	<div class="box300 col5">
	<div style="width:200px; padding:20px 10px 0 10px;">
	<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
	<!-- right column links -->
	<ins class="adsbygoogle"
		 style="display:inline-block;width:200px;height:90px"
		 data-ad-client="ca-pub-6651950180071236"
		 data-ad-slot="5818192458"></ins>
	<script>
	(adsbygoogle = window.adsbygoogle || []).push({});
	</script>
	</div>
	</div>


	<div class="box300 col4">
		<h3 class="follow">Follow <span>C</span><span>S</span><span>S</span>PLAY</h3>
		<br />
		<p><a href="http://facebook.com/StuCSSplay" rel="nofollow"><img src="../new-images/facebook.png" alt="Facebook" /></a>&nbsp;<a href="http://twitter.com/stucssplay" rel="nofollow"><img src="../new-images/twitter.png" alt="Twitter" /></a>&nbsp;<a href="../feed.xml" title="RSS2.0 feed"><img src="../new-images/rss.png" alt="rss feed" title="RSS2.0 feed" /></a>&nbsp;<a href="../facebook-fan-page.html" rel="nofollow"><img src="../new-images/fanpage.png" alt="Facebook Fan Page" /></a><br>
		</p>
		<div class="g-plusone"></div>
		<script type="text/javascript">
		  (function() {
			var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
			po.src = 'https://apis.google.com/js/plusone.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		  })();
		</script>
	</div>

	<div class="box300 col5">
		<h3 class="pages"><span>C</span><span>S</span><span>S</span>PLAY useful pages</h3>
		<ul>
			<li><a href="../ads_page.html">Advertise with CSS PLAY</a></li>
			<li><a href="../service.html">Web design &amp; assistance</a></li>
			<li><a href="http://www.stunicholls.com/" rel="nofollow">Stu Nicholls website</a></li>
			<li><a href="http://www.istu.co.uk/" rel="nofollow">iStu website</a></li>
			<li><a href="http://www.cssplay.com/" rel="nofollow">Photon website</a></li>
		</ul>
	</div>
</div>
<div class="footer">
	<p>&copy; 2004-2016 Stu Nicholls - <span>C</span><span>S</span><span>S</span>PLAY - All rights reserved</p>
</div>
</section>

<ul class="sub">
	<li><a href="../comments/comments.php@comment_id=Tooltips&#32;Updated" title="CSSplay comments">Demonstration comments</a></li>
	<li id="design"><a href="../service.html">Design &amp; Assistance</a></li>
	<li id="faqs"><a href="../faqs.html">FAQs</a></li>
	<li id="contact"><a href="../w3c/contact.html">Contact</a></li>
	<li id="privacy"><a href="../w3c/privacy.html">Privacy Policy</a></li>
	<li id="support"><a href="../support.html">Support</a></li>
</ul></div>

</body>
</html>
