Initial tooltip component commit - #41

dist/mini-default.css

@@ -1391,6 +1391,53 @@ mark {
     -webkit-animation: alert-anim 6s linear infinite;
     animation: alert-anim 6s linear infinite; }
 
+.tooltip {
+  position: relative;
+  display: inline-block; }
+  .tooltip:before, .tooltip:after {
+    position: absolute;
+    opacity: 0;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(100%);
+    clip-path: inset(100%);
+    -webkit-transition: all 0.3s ease 0s;
+    transition: all 0.3s ease 0s;
+    z-index: 1010; }
+  .tooltip:not(.bottom):before, .tooltip:not(.bottom):after {
+    bottom: 100%;
+    left: 50%; }
+  .tooltip.bottom:before, .tooltip.bottom:after {
+    top: 100%;
+    left: 50%; }
+  .tooltip:hover:before, .tooltip:hover:after {
+    opacity: 1;
+    clip: auto;
+    -webkit-clip-path: inset(0%);
+    clip-path: inset(0%); }
+  .tooltip:before {
+    content: '';
+    background: transparent;
+    border: 6px solid transparent;
+    left: calc(50% - 6px); }
+  .tooltip:not(.bottom):before {
+    border-top-color: #383838; }
+  .tooltip.bottom:before {
+    border-bottom-color: #383838; }
+  .tooltip:after {
+    content: attr(aria-label);
+    background: #383838;
+    color: white;
+    padding: 8px 10px;
+    white-space: nowrap;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    border-radius: 2px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); }
+  .tooltip:not(.bottom):after {
+    margin-bottom: 12px; }
+  .tooltip.bottom:after {
+    margin-top: 12px; }
+
 /*
 	Custom contextual background elements and alerts.
 */

docs/v2/DEVLOG.md

@@ -772,3 +772,7 @@
 - Updated `breadcrumbs` component in the `utility` module to properly utilize the `ceil()` Sass function, so that no white line errors are shown, effectively fixing the only bug I managed to find with the component's presentation.
 - Updated `utility` module's `visually-hidden` to properly do its job.
 - First demo of the `tooltip` component. Works properly. Needs some tweaks to display a top and bottom variant, based on user choice.
+
+## 20170118
+
+- `tooltip` added to `contextual` module, minor changes to it, allows both top and `bottom` versions at the same time.

docs/v2/demo.html

@@ -153,7 +153,7 @@
 			</ul>
 		</div>
 		<style>
-			.tooltip {
+			/*.tooltip {
 				position: relative;
 				display: inline-block;
 			}
@@ -191,10 +191,10 @@
 				white-space: nowrap;
 				-webkit-transform: translateX(-50%);
 						transform: translateX(-50%);
-			}
+			}*/
 		</style>
 		<div class="col-md-offset-1">
-			<span class="tooltip" aria-label="This is some sample tooltip text">Show a tooltip while hovering</span><br /><br /><br />
+			<mark class="tooltip bottom" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
 		</div>
 	  </div>
 

src/mini/_contextual.scss

@@ -186,3 +186,68 @@ $alert-animated-name:		'animated' !default;			// Class name for animated alerts
 		}
 	}
 }
+// Tooltip variables
+$include-tooltip:			true !default;						// Should tooltips be included?
+$tooltip-name:              'tooltip' !default;               	// Class name for the tooltips
+$tooltip-bottom-name:		'bottom' !default;					// Bottom tooltip class name
+// Default styling for alerts. Use mixins for alternate styles
+@if $include-tooltip {
+	.#{$tooltip-name} {
+		position: relative;
+		display: inline-block;
+		&:before, &:after {
+			position: absolute;
+			opacity: 0;
+			clip: rect(0 0 0 0);
+			-webkit-clip-path: inset(100%);
+					clip-path: inset(100%);
+			-webkit-transition: all 0.3s ease 0s;
+					transition: all 0.3s ease 0s;
+			// Remember to keep this index a lower value than the one used for stickies.
+			z-index: 1010;	// Deals with certain problems when combined with cards and tables.
+		}
+		&:not(.#{$tooltip-bottom-name}):before, &:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
+			bottom: 100%;
+			left: 50%;
+		}
+		&.#{$tooltip-bottom-name}:before, &.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
+			top: 100%;
+			left: 50%;
+		}
+		&:hover:before, &:hover:after {
+			opacity: 1;
+			clip: auto;
+			-webkit-clip-path: inset(0%);
+					clip-path: inset(0%);
+		}
+		&:before {	// This is the little tooltip triangle
+			content: '';
+			background: transparent;
+			border: 6px solid transparent;
+			left: calc(50% - 6px);
+		}
+		&:not(.#{$tooltip-bottom-name}):before { // Top (default) tooltip styling
+			border-top-color: #383838;
+		}
+		&.#{$tooltip-bottom-name}:before { // Bottom tooltip styling
+			border-bottom-color: #383838;
+		}
+		&:after {	// This is the actual tooltip's text block
+			content: attr(aria-label);
+			background: #383838;
+			color: white;
+			padding: 8px 10px;
+			white-space: nowrap;
+			-webkit-transform: translateX(-50%);
+					transform: translateX(-50%);
+			border-radius: 2px;
+			box-shadow: 0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15);
+		}
+		&:not(.#{$tooltip-bottom-name}):after { // Top (default) tooltip styling
+			margin-bottom: 12px;
+		}
+		&.#{$tooltip-bottom-name}:after { // Bottom tooltip styling
+			margin-top: 12px;
+		}
+	}
+}