.mysite-tooltips {
	position: relative;
	display: inline;
  }

  .mysite-tooltips:hover {
	background-color: #f2f2f2;
  }
  
  .mysite-tooltips > span {
	font:300 12px 'Open Sans', sans-serif;
	position: absolute;
	padding:5px 10px;
	width:140px;
	text-align: center;
	visibility: hidden;
	opacity: 0;
	filter: alpha(opacity=0);
	transition: transform .3s, opacity .6s, margin-left .2s, margin-top .2s;
  }

  .mysite-tooltips[mysite-tooltip-position="top"] > span ,
  .mysite-tooltips[mysite-tooltip-position="right"] > span {
	margin-left:10px;
	-ms-transform: rotate(30deg);
	-webkit-transform: rotate(30deg);
	transform: rotate(30deg);
  }

  .mysite-tooltips[mysite-tooltip-position="bottom"] > span ,
  .mysite-tooltips[mysite-tooltip-position="left"] > span {
	-ms-transform: rotate(-30deg);
	-webkit-transform: rotate(-30deg);
	transform: rotate(-30deg);
  }
  
  .mysite-tooltips[mysite-tooltip-position="right"] > span ,
  .mysite-tooltips[mysite-tooltip-position="left"] > span {
	margin-top:30px;
  }

  .mysite-tooltips > span:after {
	content: '';
	position: absolute;
	width: 0; height: 0;
  }
  
  .mysite-tooltips[mysite-tooltip-position="top"] > span:after{
	top: 100%;
	left: 50%;
	margin-left: -8px;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
  }
  
  .mysite-tooltips[mysite-tooltip-position="bottom"] > span:after{
	bottom: 100%;
	left: 50%;
	margin-left: -8px;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
  }
  
  .mysite-tooltips[mysite-tooltip-position="left"] > span:after{
	top: 50%;
	left: 100%;
	margin-top: -8px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
  }
  
  .mysite-tooltips[mysite-tooltip-position="right"] > span:after{
	top: 50%;
	right: 100%;
	margin-top: -8px;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
  }


 .mysite-tooltips:hover > span {
	visibility: visible;
	opacity: 1;
	z-index: 999;
	-ms-transform: rotate(0deg);
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
	filter: alpha(opacity=100);
  }

  .mysite-tooltips[mysite-tooltip-position="top"]:hover > span{
	bottom: 30px;
	left: 50%;
	margin-left: -76px;
  }
  
  .mysite-tooltips[mysite-tooltip-position="bottom"]:hover > span{
	top: 30px;
	left: 50%;
	margin-left: -76px;
  }
  
  .mysite-tooltips[mysite-tooltip-position="left"]:hover > span{
	right: 100%;
	top: 50%;
	margin-top: -15px;
	margin-right: 15px;
  }
  
  .mysite-tooltips[mysite-tooltip-position="right"]:hover > span{
	left: 100%;
	top: 50%;
	margin-top: -15px;
	margin-left: 15px;
  }