Switched tooltips implementation to modified Bootstrap script

css/laps.less

@@ -1,8 +1,10 @@
+@import "variables.less";
 @import "mixins.less";
 
 #wpadminbar {
 
 	#wp-admin-bar-laps {
+
 		.ab-sub-wrapper {
 			min-width: 90%;
 			width: 90%;
@@ -32,7 +34,7 @@
 		overflow: hidden;
 		height: 20px;
 		margin: 6px 0;
-		background-color: #f5f5f5;
+		background-color: @timeline-bg;
 		border-radius: 4px;
 		.box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
 	}
@@ -41,40 +43,41 @@
 		float: left;
 		width: 0%;
 		height: 20px;
-		font-size: 12px;
+		font-size: @font-size-small;
 		color: #fff;
 		text-align: center;
-		background-color: #428bca;
+		background-color: @event-info-color;
 		.box-shadow(inset 0 -1px 0 rgba(0, 0, 0, .15));
 		.transition(width .6s ease);
 		position: absolute; // disable stacking at start
-		border-left: 1px solid #f5f5f5;
+		border-left: 1px solid @timeline-bg;
 	}
 
 	.laps-timeline .event-theme {
-		background-color: #5cb85c;
+		background-color: @event-theme-color;
 	}
 
 	.laps-timeline .event-plugin {
-		background-color: #428bca;
+		background-color: @event-plugin-color;
 	}
 
 	.laps-timeline .event-core {
-		background-color: #f0ad4e;
+		background-color: @event-core-color;
 	}
 
 	.laps-timeline .event-query {
-		background-color: #5bc0de;
+		background-color: @event-info-color;
 	}
 
-	[data-hint]:after {
-		font-size: 13px;
-		background-color: #464646;
-		text-shadow: none;
+	@import "tooltip.less";
+
+	.tooltip.in {
+		.opacity(1);
 	}
 
-	.hint--bottom:before {
-	  border-bottom-color: #464646;
+	.tooltip-inner {
+		line-height: 20px;
+		text-align: left;
 	}
 }