Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-16 17:38:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Test different tooltip

Browse Source
This commit is contained in:
Dennis Eichhorn 2019-02-16 18:15:00 +01:00
parent cd72c93808
commit 1ddc980162
3 changed files with 73 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
styles.css
View File

@ -3385,42 +3385,32 @@ p {
/* pagination */ /* pagination */
/* pre */ /* pre */
/* tag */ /* tag */
.tooltip {
position: relative;
cursor: pointer;
display: inline-block; }
.tooltip > i { .tooltip > i {
-webkit-border-radius: 3px; font-size: 0.9rem;
-moz-border-radius: 3px; position: relative;
-ms-border-radius: 3px; z-index: 2;
border-radius: 3px; cursor: pointer; }
background-clip: padding-box; .tooltip > i:before, .tooltip > i:after {
text-align: center;
font-size: 0.7em;
color: #fff;
line-height: 1.0em;
background: #000000;
position: absolute;
padding: 5px;
bottom: 100%;
left: -50%;
margin-bottom: 10px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
white-space: pre; } pointer-events: none; }
.tooltip > i:before, .tooltip > i:after { .tooltip > i:before {
content: ""; white-space: nowrap;
position: absolute; position: absolute;
border-left: 10px solid transparent; bottom: 150%;
border-right: 10px solid transparent; margin-bottom: 5px;
top: 100%; padding: 7px;
left: 50%; -webkit-border-radius: 3px;
margin-left: -10px; } -moz-border-radius: 3px;
.tooltip > i:after { border-radius: 3px;
border-top: 10px solid #000000; background-color: #000;
margin-top: 0; background-color: rgba(51, 51, 51, 0.9);
z-index: 1; } color: #fff;
.tooltip:hover > i { content: attr(data-tooltip);
text-align: center; }
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }

54
tooltip.css
View File

@ -18,42 +18,32 @@
/* pagination */ /* pagination */
/* pre */ /* pre */
/* tag */ /* tag */
.tooltip {
position: relative;
cursor: pointer;
display: inline-block; }
.tooltip > i { .tooltip > i {
-webkit-border-radius: 3px; font-size: 0.9rem;
-moz-border-radius: 3px; position: relative;
-ms-border-radius: 3px; z-index: 2;
border-radius: 3px; cursor: pointer; }
background-clip: padding-box; .tooltip > i:before, .tooltip > i:after {
text-align: center;
font-size: 0.7em;
color: #fff;
line-height: 1.0em;
background: #000000;
position: absolute;
padding: 5px;
bottom: 100%;
left: -50%;
margin-bottom: 10px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
white-space: pre; } pointer-events: none; }
.tooltip > i:before, .tooltip > i:after { .tooltip > i:before {
content: ""; white-space: nowrap;
position: absolute; position: absolute;
border-left: 10px solid transparent; bottom: 150%;
border-right: 10px solid transparent; margin-bottom: 5px;
top: 100%; padding: 7px;
left: 50%; -webkit-border-radius: 3px;
margin-left: -10px; } -moz-border-radius: 3px;
.tooltip > i:after { border-radius: 3px;
border-top: 10px solid #000000; background-color: #000;
margin-top: 0; background-color: rgba(51, 51, 51, 0.9);
z-index: 1; } color: #fff;
.tooltip:hover > i { content: attr(data-tooltip);
text-align: center; }
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible; visibility: visible;
opacity: 1; } opacity: 1; }

52
tooltip.scss
View File

@ -1,45 +1,37 @@
@import "_mixins", "_vars"; @import "_mixins", "_vars";
.tooltip { .tooltip > i {
font-size: 0.85rem;
position: relative; position: relative;
z-index: 2;
cursor: pointer; cursor: pointer;
display: inline-block;
> i { &:before,
@include border-radius(3px); &:after {
text-align: center;
font-size: 0.7em;
color: #fff;
line-height: 1.0em;
background: #000000;
position: absolute;
padding: 5px;
bottom: 100%;
left: -50%;
margin-bottom: 10px;
visibility: hidden; visibility: hidden;
opacity: 0; opacity: 0;
white-space: pre; pointer-events: none;
} }
> i:before, > i:after { &:before {
content: ""; white-space: nowrap;
position: absolute; position: absolute;
border-left: 10px solid transparent; bottom: 150%;
border-right: 10px solid transparent; margin-bottom: 5px;
top: 100%; padding: 7px;
left: 50%; -webkit-border-radius: 3px;
margin-left: -10px; -moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: hsla(0, 0%, 20%, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center;
}
} }
> i:after{ .tooltip:hover > i:before,
border-top: 10px solid #000000; .tooltip:hover > i:after {
margin-top: 0;
z-index: 1;
}
&:hover > i {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
}