Created
November 27, 2018 16:51
-
-
Save georgebrata/bb5bff1761411a06cdf931cb72ad00dd to your computer and use it in GitHub Desktop.
Tooltip experimental SCSS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
[class*=ng-tooltip--] { | |
position: relative; | |
display: inline-block; | |
cursor: pointer; | |
} | |
[class*=ng-tooltip--]:after, [class*=ng-tooltip--]:before { | |
position: absolute; | |
-webkit-transform: translate3d(0,0,0); | |
-moz-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
visibility: hidden; | |
opacity: 0; | |
z-index: 1000000; | |
pointer-events: none; | |
-webkit-transition: .3s ease; | |
-moz-transition: .3s ease; | |
transition: .3s ease; | |
-webkit-transition-delay: 0s; | |
-moz-transition-delay: 0s; | |
transition-delay: 0s; | |
} | |
[class*=ng-tooltip--]:hover:after, [class*=ng-tooltip--]:hover:before { | |
visibility: visible; | |
opacity: 1; | |
-webkit-transition-delay: .1s; | |
-moz-transition-delay: .1s; | |
transition-delay: .1s; | |
} | |
[class*=ng-tooltip--]:before { | |
content: ''; | |
position: absolute; | |
background: 0 0; | |
border: 6px solid transparent; | |
z-index: 1000001; | |
} | |
[class*=ng-tooltip--]:after { | |
background: white; | |
color: #000; | |
padding: 12px 20px; | |
font-size: 16px; | |
line-height: 1.7; | |
font-weight: 400; | |
white-space: nowrap; | |
border: 1px solid #eaeaea; | |
//box-shadow: 4px 4px 8px rgba(0,0,0,.3); | |
} | |
[class*=ng-tooltip--][aria-label]:after { | |
content: attr(aria-label); | |
} | |
[class*=ng-tooltip--][data-hint]:after { | |
content: attr(data-hint); | |
} | |
[aria-label='']:after, [aria-label='']:before, [data-hint='']:after, [data-hint='']:before { | |
display: none!important; | |
} | |
.ng-tooltip--top-left:before, .ng-tooltip--top-right:before, .ng-tooltip--top:before { | |
border-top-color: #eaeaea; | |
} | |
.ng-tooltip--bottom-left:before, .ng-tooltip--bottom-right:before, .ng-tooltip--bottom:before { | |
border-bottom-color: #eaeaea; | |
} | |
.ng-tooltip--top:after, .ng-tooltip--top:before { | |
bottom: 100%; | |
left: 50%; | |
} | |
.ng-tooltip--top:before { | |
margin-bottom: -11px; | |
left: calc(50% - 6px); | |
} | |
.ng-tooltip--top:after { | |
-webkit-transform: translateX(-50%); | |
-moz-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.ng-tooltip--top:hover:before { | |
-webkit-transform: translateY(-8px); | |
-moz-transform: translateY(-8px); | |
transform: translateY(-8px); | |
} | |
.ng-tooltip--top:hover:after { | |
-webkit-transform: translateX(-50%) translateY(-8px); | |
-moz-transform: translateX(-50%) translateY(-8px); | |
transform: translateX(-50%) translateY(-8px); | |
} | |
.ng-tooltip--bottom:after, .ng-tooltip--bottom:before { | |
top: 100%; | |
left: 50%; | |
} | |
.ng-tooltip--bottom:before { | |
margin-top: -11px; | |
left: calc(50% - 6px); | |
} | |
.ng-tooltip--bottom:after { | |
-webkit-transform: translateX(-50%); | |
-moz-transform: translateX(-50%); | |
transform: translateX(-50%); | |
} | |
.ng-tooltip--bottom:hover:before { | |
-webkit-transform: translateY(8px); | |
-moz-transform: translateY(8px); | |
transform: translateY(8px); | |
} | |
.ng-tooltip--bottom:hover:after { | |
-webkit-transform: translateX(-50%) translateY(8px); | |
-moz-transform: translateX(-50%) translateY(8px); | |
transform: translateX(-50%) translateY(8px); | |
} | |
.ng-tooltip--right:before { | |
border-right-color: #eaeaea; | |
margin-left: -11px; | |
} | |
.ng-tooltip--right:after { | |
margin-bottom: -14px; | |
} | |
.ng-tooltip--right:after, .ng-tooltip--right:before { | |
left: 100%; | |
bottom: 30%; | |
} | |
.ng-tooltip--right:hover:after, .ng-tooltip--right:hover:before { | |
-webkit-transform: translateX(10px); | |
-moz-transform: translateX(10px); | |
transform: translateX(10px); | |
} | |
.ng-tooltip--left:before { | |
border-left-color: #eaeaea; | |
margin-right: -11px; | |
} | |
.ng-tooltip--left:after { | |
margin-bottom: -14px; | |
} | |
.ng-tooltip--left:after, .ng-tooltip--left:before { | |
right: 100%; | |
bottom: 30%; | |
} | |
.ng-tooltip--left:hover:after, .ng-tooltip--left:hover:before { | |
-webkit-transform: translateX(-10px); | |
-moz-transform: translateX(-10px); | |
transform: translateX(-10px); | |
} | |
.ng-tooltip--top-left:after, .ng-tooltip--top-left:before { | |
bottom: 100%; | |
left: 50%; | |
} | |
.ng-tooltip--top-left:before { | |
margin-bottom: -11px; | |
left: calc(50% - 6px); | |
} | |
.ng-tooltip--top-left:after { | |
-webkit-transform: translateX(-100%); | |
-moz-transform: translateX(-100%); | |
transform: translateX(-100%); | |
margin-left: 12px; | |
} | |
.ng-tooltip--top-left:hover:before { | |
-webkit-transform: translateY(-8px); | |
-moz-transform: translateY(-8px); | |
transform: translateY(-8px); | |
} | |
.ng-tooltip--top-left:hover:after { | |
-webkit-transform: translateX(-100%) translateY(-8px); | |
-moz-transform: translateX(-100%) translateY(-8px); | |
transform: translateX(-100%) translateY(-8px); | |
} | |
.ng-tooltip--top-right:after, .ng-tooltip--top-right:before { | |
bottom: 100%; | |
left: 50%; | |
} | |
.ng-tooltip--top-right:before { | |
margin-bottom: -11px; | |
left: calc(50% - 6px); | |
} | |
.ng-tooltip--top-right:after { | |
-webkit-transform: translateX(0); | |
-moz-transform: translateX(0); | |
transform: translateX(0); | |
margin-left: -12px; | |
} | |
.ng-tooltip--top-right:hover:after, .ng-tooltip--top-right:hover:before { | |
-webkit-transform: translateY(-8px); | |
-moz-transform: translateY(-8px); | |
transform: translateY(-8px); | |
} | |
.ng-tooltip--bottom-left:after, .ng-tooltip--bottom-left:before { | |
top: 100%; | |
left: 50%; | |
} | |
.ng-tooltip--bottom-left:before { | |
margin-top: -11px; | |
left: calc(50% - 6px); | |
} | |
.ng-tooltip--bottom-left:after { | |
-webkit-transform: translateX(-100%); | |
-moz-transform: translateX(-100%); | |
transform: translateX(-100%); | |
margin-left: 12px; | |
} | |
.ng-tooltip--bottom-left:hover:before { | |
-webkit-transform: translateY(8px); | |
-moz-transform: translateY(8px); | |
transform: translateY(8px); | |
} | |
.ng-tooltip--bottom-left:hover:after { | |
-webkit-transform: translateX(-100%) translateY(8px); | |
-moz-transform: translateX(-100%) translateY(8px); | |
transform: translateX(-100%) translateY(8px); | |
} | |
.ng-tooltip--bottom-right:after, .ng-tooltip--bottom-right:before { | |
top: 100%; | |
left: 50%; | |
} | |
.ng-tooltip--bottom-right:before { | |
margin-top: -11px; | |
left: calc(50% - 6px); | |
} | |
.ng-tooltip--bottom-right:after { | |
-webkit-transform: translateX(0); | |
-moz-transform: translateX(0); | |
transform: translateX(0); | |
margin-left: -12px; | |
} | |
.ng-tooltip--bottom-right:hover:after, .ng-tooltip--bottom-right:hover:before { | |
-webkit-transform: translateY(8px); | |
-moz-transform: translateY(8px); | |
transform: translateY(8px); | |
} | |
.ng-tooltip--no-animate:after, .ng-tooltip--no-animate:before { | |
-webkit-transition-duration: 0s; | |
-moz-transition-duration: 0s; | |
transition-duration: 0s; | |
} | |
[class*=ng-tooltip--]:before { | |
white-space: pre !important; | |
line-height: 1.4em; | |
} | |
[class*=ng-tooltip--]:after { | |
white-space: pre !important; | |
line-height: 1.4em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment