Jingga/cssOMS
1
0
Fork 0
mirror of https://github.com/Karaka-Management/cssOMS.git synced 2026-01-28 18:08:39 +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 */
/* pre */
/* tag */
.tooltip {
.tooltip > i {
font-size: 0.9rem;
position: relative;
cursor: pointer;
display: inline-block; }
.tooltip > i {
-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;
z-index: 2;
cursor: pointer; }
.tooltip > i:before, .tooltip > i:after {
visibility: hidden;
opacity: 0;
white-space: pre; }
.tooltip > i:before, .tooltip > i:after {
content: "";
pointer-events: none; }
.tooltip > i:before {
white-space: nowrap;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 100%;
left: 50%;
margin-left: -10px; }
.tooltip > i:after {
border-top: 10px solid #000000;
margin-top: 0;
z-index: 1; }
.tooltip:hover > i {
visibility: visible;
opacity: 1; }
bottom: 150%;
margin-bottom: 5px;
padding: 7px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color: #000;
background-color: rgba(51, 51, 51, 0.9);
color: #fff;
content: attr(data-tooltip);
text-align: center; }
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible;
opacity: 1; }
.spinner-1 {
width: 40px;

58
tooltip.css
View File

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

58
tooltip.scss
View File

@ -1,45 +1,37 @@
@import "_mixins", "_vars";
.tooltip {
.tooltip > i {
font-size: 0.85rem;
position: relative;
z-index: 2;
cursor: pointer;
display: inline-block;
> i {
@include border-radius(3px);
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;
&:before,
&:after {
visibility: hidden;
opacity: 0;
white-space: pre;
pointer-events: none;
}
> i:before, > i:after {
content: "";
&:before {
white-space: nowrap;
position: absolute;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: 100%;
left: 50%;
margin-left: -10px;
}
> i:after{
border-top: 10px solid #000000;
margin-top: 0;
z-index: 1;
}
&:hover > i {
visibility: visible;
opacity: 1;
bottom: 150%;
margin-bottom: 5px;
padding: 7px;
-webkit-border-radius: 3px;
-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;
}
}
.tooltip:hover > i:before,
.tooltip:hover > i:after {
visibility: visible;
opacity: 1;
}