mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-01 03:20:30 +02:00
Code Issues Releases Wiki Activity

Initial tooltip component commit - #41

Browse Source
This commit is contained in:
Angelos Chalaris
2017-01-18 10:43:02 +02:00
parent b8f8ec9481
commit 962626c0ec
5 changed files with 133 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
dist/mini-default.css vendored
View File

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

2
dist/mini-default.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
docs/v2/DEVLOG.md
View File

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

6
docs/v2/demo.html
View File

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

65
src/mini/_contextual.scss
View File

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