Added tooltip

Author: accgit

src/css/style.css

@@ -9,6 +9,7 @@
 @import url(style.dashboard.css);
 @import url(style.tables.css);
 @import url(style.modal.box.css);
+@import url(style.tooltip.css);
 
 /*
     elements

src/css/style.dashboard.css

@@ -103,7 +103,7 @@
 a.action-button {
     text-decoration: none;
       border-radius: 3px;
-            padding: 2px 6px;
+            padding: 2px 7px;
 	    display: inline-block;
 	      color: white;
 }

src/css/style.tables.css

@@ -16,6 +16,10 @@ table td:first-child {
     padding-left: 8px;
 }
 
+table td {
+    color: #575757;
+}
+
 /*
     default
 */

src/css/style.tooltip.css

@@ -0,0 +1,51 @@
+
+/*
+    tooltip
+*/
+[data-tooltip] {
+    position: relative;
+     z-index: 2;
+}
+
+[data-tooltip]:before,
+[data-tooltip]:after {
+    visibility: hidden;
+       opacity: 0;
+}
+
+[data-tooltip]:before {
+    background-color: rgba(0, 0, 0, 0.95);
+       border-radius: 3px;
+       margin-bottom: 5px;
+         margin-left: -50px;
+	  text-align: center;
+	   min-width: 100px;
+	   font-size: 1em;
+            position: absolute;
+	     content: attr(data-tooltip);
+	     padding: 5px;
+	      bottom: 120%;
+	       color: #fff;
+	        left: 50%;
+}
+
+
+[data-tooltip]:after {
+    border-right: 5px solid transparent;
+     border-left: 5px solid transparent;
+     margin-left: -5px;
+     line-height: 0;
+      border-top: 5px solid rgba(0, 0, 0, 0.95);
+       font-size: 0;
+        position: absolute;
+	 content: " ";
+	  bottom: 120%;
+	   width: 0;
+	    left: 50%;
+}
+
+[data-tooltip]:hover:before,
+[data-tooltip]:hover:after {
+    visibility: visible;
+       opacity: 1;
+}

src/index.html

@@ -172,29 +172,29 @@ <h4>Table style</h4>
 						<td>Root</td>
 						<td>root@domain.com</td>
 						<td>
-							<a href="" class="action-button edit"><i class="fa fa-pencil"></i></a>
-							<a href="" class="action-button delete"><i class="fa fa-trash"></i></a>
-							<a href="#root" class="action-button detail"><i class="fa fa-search"></i></a>
+							<a href="" class="action-button edit" data-tooltip="Edit"><i class="fa fa-pencil"></i></a>
+							<a href="" class="action-button delete" data-tooltip="Delete"><i class="fa fa-trash"></i></a>
+							<a href="#root" class="action-button detail" data-tooltip="Details"><i class="fa fa-search"></i></a>
 						</td>
 					</tr>
 					<tr class="default">
 						<td>2</td>
 						<td>Admin</td>
 						<td>admin@domain.com</td>
 						<td>
-							<a href="" class="action-button edit"><i class="fa fa-pencil"></i></a>
-							<a href="" class="action-button delete"><i class="fa fa-trash"></i></a>
-							<a href="#admin" class="action-button detail"><i class="fa fa-search"></i></a>
+							<a href="" class="action-button edit" data-tooltip="Edit"><i class="fa fa-pencil"></i></a>
+							<a href="" class="action-button delete" data-tooltip="Delete"><i class="fa fa-trash"></i></a>
+							<a href="#root" class="action-button detail" data-tooltip="Details"><i class="fa fa-search"></i></a>
 						</td>
 					</tr>
 					<tr class="default">
 						<td>3</td>
 						<td>User</td>
 						<td>user@domain.com</td>
 						<td>
-							<a href="" class="action-button edit"><i class="fa fa-pencil"></i></a>
-							<a href="" class="action-button delete"><i class="fa fa-trash"></i></a>
-							<a href="#user" class="action-button detail"><i class="fa fa-search"></i></a>
+							<a href="" class="action-button edit" data-tooltip="Edit"><i class="fa fa-pencil"></i></a>
+							<a href="" class="action-button delete" data-tooltip="Delete"><i class="fa fa-trash"></i></a>
+							<a href="#root" class="action-button detail" data-tooltip="Details"><i class="fa fa-search"></i></a>
 						</td>
 					</tr>
 				</table>