tooltip

itf/static/css/noel/main.css

@@ -62,6 +62,44 @@ font-weight:bold;
     padding-bottom: 8px;
 }
 
+.tooltipLink {
+    position: relative;
+}
+
+.tooltip {
+    position: absolute;
+    left: 30px;
+    top: 15px;
+    background: #F7BD00;
+    padding: 6px;
+    border-radius: 8px;
+    color: #fff;
+    width: 156px;
+    opacity: 0;
+    visibility: hidden;
+    -o-transition: all 0.3s ease-in;
+    -moz-transition: all 0.3s ease-in;    
+    -webkit-transition: all 0.3s ease-in;
+    transition: all 0.3s ease-in;
+}
+
+.tooltip:after {
+    content:"";
+    display:block; /* reduce the damage in FF3.0 */
+    position:absolute;
+    top:0px;
+    left:-15px;
+    width:0;
+    border-width:14px 0 0 22px;
+    border-style:solid;
+    border-color:#F7BD00 transparent;
+}
+
+.tooltipLink:hover .tooltip {
+    opacity: 0.9;
+    visibility: visible;
+}
+
 .tabHeader
 {font-size:24px;
 color:#ffb400;

itf/templates/test_static_templates/individual-profiles.html

@@ -81,8 +81,8 @@
 </div> <!-- end scripts -->
 
 <div id="connections" class="tab_content">
-    <p><a href="" class="toggleLink">A V Gopalakrishnan</a> Theatre Enthusiast, Mumbai</p>
+<!--    <p><a href="" class="toggleLink">A V Gopalakrishnan</a> Theatre Enthusiast, Mumbai</p>-->
-    <div class="toggleDiv">
+
         <h5 class="orangeInnerRight">Member of</h5>
         <br />
 
@@ -92,7 +92,7 @@
         	</div>
 	
 	<div class="productionEachText">
-	    <div class="orangeInnerRight">Name of Group</div>
+	    <a href="">Name of Group</a>
 	    <div>Location</div>
 	    <div>Relationship to Group</div>
 	</div>
@@ -106,7 +106,7 @@
         	</div>
 	
 	<div class="productionEachText">
-	    <div class="orangeInnerRight">Name of Group</div>
+	    <a href="">Name of Group</a>
 	    <div>Location</div>
 	    <div>Relationship to Group</div>
 	</div>
@@ -120,7 +120,7 @@
         	</div>
 	
 	<div class="productionEachText">
-	    <div class="orangeInnerRight">Name of Group</div>
+	    <a href="">Name of Group</a>
 	    <div>Location</div>
 	    <div>Relationship to Group</div>
 	</div>
@@ -141,7 +141,7 @@
         	</div>
 	
 	<div class="productionEachText">
-	    <div class="orangeInnerRight">Name of Person</div>
+	    <a href="">Name of Person</a>
 	    <div>Occupation/one-line desc</div>
 	    <div>Location</div>
 	</div>
@@ -155,7 +155,7 @@
         	</div>
 	
 	<div class="productionEachText">
-	    <div class="orangeInnerRight">Name of Person</div>
+	    <a href="">Name of Person</a>
 	    <div>Occupation/one-line desc</div>
 	    <div>Location</div>
 	</div>
@@ -169,7 +169,7 @@
         	</div>
 	
 	<div class="productionEachText">
-	    <div class="orangeInnerRight">Name of Person</div>
+	    <a href="">Name of Person</a>
 	    <div>Occupation/one-line desc</div>
 	    <div>Location</div>
 	</div>
@@ -177,10 +177,7 @@
   
     </div> <!-- end production each -->
        
-    <a href="" class="toggleLink rightFloat">More>></a>
+    <a href="" class="toggleLink rightFloat">More>></a>    
-
-    </div> <!-- end toggleClass -->
-    
     
     <div class="clear"></div>
     

itf/templates/test_static_templates/scriptarchive.html

@@ -79,7 +79,14 @@ $(function() {
 	</div>
 	
 	<div class="productionEachText">
-	    <a href="">Name of Production (2010)</a>
+	    <a href="">Name of Production (2010)
+	            <span class="tooltip">
+			<div>
+			    <strong>Some Title</strong><br />
+			    Some text goes here
+			</div>
+		    </span>
+	    </a>
 	    <div>Group: Group Name</div>
 	    <div>Some copy here</div>
 	    <div>No. of shows: 50</div>