Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-02-15 09:08: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

58
styles.css
View File

@ -3385,44 +3385,34 @@ p {
/* pagination */ /* pagination */
/* pre */ /* pre */
/* tag */ /* tag */
.tooltip { .tooltip > i {
font-size: 0.9rem;
position: relative; position: relative;
cursor: pointer; z-index: 2;
display: inline-block; } cursor: pointer; }
.tooltip > i { .tooltip > i:before, .tooltip > i:after {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
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);
visibility: visible; text-align: center; }
opacity: 1; }
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible;
opacity: 1; }
.spinner-1 { .spinner-1 {
width: 40px; width: 40px;

58
tooltip.css
View File

@ -18,43 +18,33 @@
/* pagination */ /* pagination */
/* pre */ /* pre */
/* tag */ /* tag */
.tooltip { .tooltip > i {
font-size: 0.9rem;
position: relative; position: relative;
cursor: pointer; z-index: 2;
display: inline-block; } cursor: pointer; }
.tooltip > i { .tooltip > i:before, .tooltip > i:after {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
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);
visibility: visible; text-align: center; }
opacity: 1; }
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible;
opacity: 1; }
/*# sourceMappingURL=tooltip.css.map */ /*# sourceMappingURL=tooltip.css.map */

58
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;
> i:after{ background-color: hsla(0, 0%, 20%, 0.9);
border-top: 10px solid #000000; color: #fff;
margin-top: 0; content: attr(data-tooltip);
z-index: 1; text-align: center;
}
&:hover > i {
visibility: visible;
opacity: 1;
} }
} }
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible;
opacity: 1;
}