mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-11 08:23:58 +02:00
Code Issues Releases Wiki Activity

Initial tooltip demo, updated visually-hidden class

Browse Source
This commit is contained in:
Angelos Chalaris
2017-01-17 00:53:29 +02:00
parent 61eca67df9
commit b8f8ec9481
6 changed files with 67 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View File

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

46
docs/v2/demo.html
View File

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