Initial tooltip demo, updated visually-hidden class

dist/mini-default.css

@@ -4,8 +4,8 @@
 	Author: Angelos Chalaris (chalarangelo@gmail.com)
 	mini.css version: v2.1.0 (Fermion)
 */
-/* 
+/*
-	Browsers resets and base typography. 
+	Browsers resets and base typography.
 */
 html {
   font-size: 16px; }
@@ -158,7 +158,7 @@ a {
   color: #0277bd;
   text-decoration: underline;
   opacity: 1;
-  -webkit-transition: all 0.3 ease 0s;
+  -webkit-transition: all 0.3s ease 0s;
   transition: all 0.3s ease 0s; }
   a:visited {
     color: #01579b; }
@@ -1548,8 +1548,9 @@ progress.nano {
   margin: -1px !important;
   border: 0 !important;
   padding: 0 !important;
-  clip-path: inset(100%);
+  clip: rect(0 0 0 0) !important;
-  clip: rect(0 0 0 0);
+  -webkit-clip-path: inset(100%) !important;
+  clip-path: inset(100%) !important;
   overflow: hidden !important; }
 
 ul.breadcrumbs {

docs/v2/DEVLOG.md

@@ -770,3 +770,5 @@
 
 - Added `$include-horizontal-table` flag in `table` module to conditionally enable/disable the `horizontal` `table`s.
 - 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.

docs/v2/demo.html

@@ -101,7 +101,7 @@
       </div>
     </div>
     <header class="sticky" style="box-shadow:  0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
-      <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="vertical-align: top; position: relative; top:-12px;"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></span></a><div style="display: inline; overflow: auto;">
+      <a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="display:inline-block; vertical-align: top; position: relative; top:-12px;"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></span></a><div style="display: inline; overflow: auto;">
       <a href="index.html" class="button">Introduction</a>
       <a href="modules.html" class="button">Modules</a>
       <a href="flavors.html" class="button">Flavors</a>
@@ -152,6 +152,50 @@
 			  <li>File</li>
 			</ul>
 		</div>
+		<style>
+			.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: 1202;
+				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 {
+				margin-top: -11px;
+				content: '';
+				background: transparent;
+				border: 6px solid transparent;
+				border-bottom-color: #383838;
+				left: calc(50% - 6px);
+			}
+			.tooltip:after {
+				content: attr(aria-label);
+				background: #383838;
+				color: white;
+				padding: 8px 10px;
+				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 />
+		</div>
 	  </div>
 
 

src/mini/_core.scss

@@ -1,5 +1,5 @@
-/* 
+/*
-	Browsers resets and base typography. 
+	Browsers resets and base typography.
 */
 $apply-defaults-to-all: 		true !default;									// Should default values be applied to all elements? (`true` or `false`).
 $base-root-font-size:			16px !default;									// Root font sizing for all elements - In `px` only!
@@ -11,7 +11,7 @@ html {
 		font-family: #{$base-font-family};
 		line-height: $base-line-height;
 		// Prevent adjustments of font size after orientation changes in mobile.
-		-webkit-text-size-adjust: 100%; 
+		-webkit-text-size-adjust: 100%;
 	}
 	* {
 		font-size: $base-font-size;
@@ -22,7 +22,7 @@ html {
 		font-family: #{$base-font-family};
 		line-height: $base-line-height;
 		// Prevent adjustments of font size after orientation changes in mobile.
-		-webkit-text-size-adjust: 100%; 
+		-webkit-text-size-adjust: 100%;
 	}
 }
 
@@ -58,7 +58,7 @@ svg:not(:root) {
 }
 
 // Show overflow in IE.
-input { 
+input {
 	overflow: visible;
 }
 
@@ -139,11 +139,11 @@ hr {
 	@if $horizontal-rule-fancy-style {
 		height: 1px;
 		background: -webkit-linear-gradient(#{$horizontal-rule-fancy-gradient});
-		background:         linear-gradient(#{$horizontal-rule-fancy-gradient});  
+		background:         linear-gradient(#{$horizontal-rule-fancy-gradient});
 	}
-	@else {   
+	@else {
 		height: 0;
-		border-top: $horizontal-rule-border-style;   
+		border-top: $horizontal-rule-border-style;
 	}
 }
 
@@ -390,7 +390,7 @@ a{
 	}
 	@if $apply-link-hover-fade {
 		opacity: 1;
-		-webkit-transition: all 0.3 ease 0s;
+		-webkit-transition: all 0.3s ease 0s;
 				transition: all 0.3s ease 0s;
 	}
 	&:visited {
@@ -406,4 +406,4 @@ a{
 			color: $link-hover-fore-color;
 		}
 	}
-}
+}

src/mini/_utility.scss

@@ -13,8 +13,9 @@
 	margin: -1px !important;
 	border: 0 !important;
 	padding: 0 !important;
-	clip-path: inset(100%);
+	clip: rect(0 0 0 0) !important;
-	clip: rect(0 0 0 0);
+	-webkit-clip-path: inset(100%) !important;
+			clip-path: inset(100%) !important;
 	overflow: hidden !important;
 }
 // Breadcrumbs