Initial tooltip demo, updated visually-hidden class

dist/mini-default.css

@@ -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);
+  clip: rect(0 0 0 0) !important;
+  -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

@@ -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 {

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);
+	clip: rect(0 0 0 0) !important;
+	-webkit-clip-path: inset(100%) !important;
+			clip-path: inset(100%) !important;
 	overflow: hidden !important;
 }
 // Breadcrumbs