/*
————————————————————————————————————————————————————————————————————————————————
# NEW Mar 2016 Tooltips
http://www.w3schools.com/css/css_tooltip.asp

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>
————————————————————————————————————————————————————————————————————————————————
*/

/* Tooltip container */
.tooltip {
	xposition: relative;
	xdisplay: inline-block;
	xborder-bottom: 1px dotted black; /* If you want dots under the hoverable text */
	}

/* Tooltip text */
.tooltip .tooltiptext {
	font-family: "Lucida Grande", "Trade Gothic W01 Bold Cn 20", Verdana, "Andale Mono", "Arial Narrow", sans-serif;
	font-size: 12px;
	line-height: 1.5em;
	xvisibility: hidden;
	width: 200px;
	color: #444;
	background: #FFC; /* #88A401; */
	text-align: left;
	padding: 20px;
	border-radius: 20px;
	xborder: 1px solid #88A401;
 
	/* Position the tooltip text  */
	position: absolute;
	z-index: 1;

	/* Top Tooltip */
    bottom: 140%;
    left: 50%; 
    margin-left: -100px; /* Use half of the width (200/2 = 60), to center the tooltip */
    
    opacity: 0;
    transition: opacity 0.5s;
	}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
	visibility: visible;
    opacity: 0.9;
	}

/* Tooltip arrow: This will make the tooltip look like a speech bubble */
.tooltip .tooltiptext::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -20px;
    border-width: 10px;
    border-style: solid;
    border-color: #FFC transparent transparent transparent;
	}

/* 

————————————————————————————————————————————————————————————————————————————————
Version 2
--------------------------------------------------------------------------------
modified from 
https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag

<a href="#" class="ttip">Link<span>CSS tooltip showing up when you mouse over the link</span></a>

Seems to work better than the version above
However, no control over truncated tooltip text at the page margins
————————————————————————————————————————————————————————————————————————————————

 */ 

.ttip {
	border-bottom: 1px dashed;
	text-decoration: none;
	}
.ttip:hover {
	cursor: help;
	position: relative;
	}
.ttip span {
	display: none;
	}
.ttip:hover span {
	border: #c0c0c0 1px dotted;
	padding: 5px 20px 5px 5px;
	display: block;
	z-index: 100;
	background: yellow;
	xbackground: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
	xleft: auto;
	margin: 10px;
	width: 250px;
	position: absolute;
	top: 10px;
	text-decoration: none;
	}

/* 

————————————————————————————————————————————————————————————————————————————————
Version 3
--------------------------------------------------------------------------------
modified from 
http://jsfiddle.net/prasun_sultania/KSk42/

<a href="http://www.google.com/" class="tt3">I am a <span>TooTip</span></a> developer.
Seems to be even shorter than the version above
However, no control over truncated tooltip text at the page margins
————————————————————————————————————————————————————————————————————————————————

 */ 

.tt3 {
	position: relative;
	}

.tt3 span {
	display: none;    
	}

.tt3:hover span, a.tt3:focus span {
	display:block;
	position:absolute;
	top:1em;
	left:1.5em;
	padding: 0.2em 0.6em;
	border:1px solid #996633;
	background-color:#FFFF66;
	color:#000;
	}