Skip to content

Instantly share code, notes, and snippets.

@KFoxder
Created June 5, 2018 15:23
Show Gist options
  • Save KFoxder/7cb8130d1b8f7a2d91a42740b3ff6514 to your computer and use it in GitHub Desktop.
Save KFoxder/7cb8130d1b8f7a2d91a42740b3ff6514 to your computer and use it in GitHub Desktop.
Angular Tool Tip
<div class="page-title col-5 col-md-7">
<!-- tooltips: -->
<tooltip tooltip-template="Back to All" tooltip-side="bottom" tooltip-class="tooltip" class="tooltips _bottom _steady _ready active">
<tip-cont>
<a class="btn btn-xs btn-circle btn-transparent page-header-navigation ng-scope" href="/email_reports/list/">
<svg viewBox="0 0 8 14" class="icon-back">
<path d="M0.349,7.001L5.882,0.36c0.354-0.424,0.985-0.481,1.409-0.129c0.424,0.354,0.48,0.983,0.128,1.41L2.953,7l4.466,5.358 c0.354,0.429,0.296,1.058-0.128,1.41c-0.424,0.354-1.055,0.295-1.409-0.129L0.349,7.001z"></path>
</svg>
</a>
</tip-cont>
<tip class="tooltip">
<tip-tip>
<span class="close-button" style="display: none;">×</span>
Back to All
</tip-tip>
<tip-arrow></tip-arrow>
</tip>
</tooltip>
<div class="chart-name">
<span class="chart-name-text">
Custom Email Report
</span>
</div>
</div>
/*
* angular-tooltips
* 1.2.2
*
* Angular.js tooltips module.
* http://720kb.github.io/angular-tooltips
*
* MIT license
* Tue Jun 20 2017
*/
@-webkit-keyframes animate-tooltip {
0% {
opacity: 0; }
50% {
opacity: .5; }
60% {
opacity: .8; }
70% {
opacity: .9; }
90% {
opacity: 1; } }
@-moz-keyframes animate-tooltip {
0% {
opacity: 0; }
50% {
opacity: .5; }
60% {
opacity: .8; }
70% {
opacity: .9; }
90% {
opacity: 1; } }
@-ms-keyframes animate-tooltip {
0% {
opacity: 0; }
50% {
opacity: .5; }
60% {
opacity: .8; }
70% {
opacity: .9; }
90% {
opacity: 1; } }
@keyframes animate-tooltip {
0% {
opacity: 0; }
50% {
opacity: .5; }
60% {
opacity: .8; }
70% {
opacity: .9; }
90% {
opacity: 1; } }
._exradicated-tooltip {
display: block;
opacity: 1;
position: absolute;
z-index: 999; }
tooltip {
display: inline-block;
position: relative; }
tooltip._multiline {
display: block; }
tooltip._slow._ready tip {
animation: animate-tooltip 0.65s; }
tooltip._fast._ready tip {
animation: animate-tooltip 0.15s; }
tooltip._steady._ready tip {
animation: animate-tooltip 0.35s; }
tooltip tip {
border-radius: 3px;
background: rgba(0, 0, 0, 0.85);
color: #fff;
display: none;
line-height: normal;
max-width: 500px;
min-width: 100px;
opacity: 0;
padding: 8px 16px;
position: absolute;
text-align: center;
width: auto;
will-change: top, left, bottom, right; }
tooltip tip._hidden {
display: block;
visibility: hidden; }
tooltip.active:not(._force-hidden) tip {
display: block;
opacity: 1;
z-index: 999; }
tooltip tip-tip {
font-size: 0.95em; }
tooltip tip-tip._large {
font-size: 1.1em; }
tooltip tip-tip._small {
font-size: 0.8em; }
tooltip._top:not(._left):not(._right) tip {
left: 50%;
top: -9px;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%); }
tooltip._top:not(._left):not(._right) tip tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 50%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0; }
tooltip._bottom:not(._left):not(._right) tip {
right: 50%;
top: 100%;
-webkit-transform: translateX(50%) translateY(9px);
transform: translateX(50%) translateY(9px); }
tooltip._bottom:not(._left):not(._right) tip tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 50%;
margin-left: -6px;
position: absolute;
width: 0; }
tooltip._right:not(._top):not(._bottom) tip {
left: 100%;
top: 50%;
-webkit-transform: translateX(9px) translateY(-50%);
transform: translateX(9px) translateY(-50%); }
tooltip._right:not(._top):not(._bottom) tip tip-arrow {
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(0, 0, 0, 0.85);
border-top: 6px solid transparent;
content: '';
height: 0;
margin-top: -6px;
position: absolute;
right: 100%;
top: 50%;
width: 0; }
tooltip._left:not(._top):not(._bottom) tip {
left: -9px;
top: 50%;
-webkit-transform: translateX(-100%) translateY(-50%);
transform: translateX(-100%) translateY(-50%); }
tooltip._left:not(._top):not(._bottom) tip tip-arrow {
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(0, 0, 0, 0.85);
border-top: 6px solid transparent;
content: '';
height: 0;
left: 100%;
margin-top: -6px;
position: absolute;
top: 50%;
width: 0; }
tooltip._top._left tip {
left: -9px;
top: -9px;
-webkit-transform: translateX(-100%) translateY(-100%);
transform: translateX(-100%) translateY(-100%); }
tooltip._top._left tip tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 90%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0; }
tooltip._top._right tip {
left: 100%;
top: -9px;
-webkit-transform: translateX(9px) translateY(-100%);
transform: translateX(9px) translateY(-100%); }
tooltip._top._right tip tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 10%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0; }
tooltip._bottom._left tip {
left: -9px;
top: 100%;
-webkit-transform: translateX(-100%) translateY(9px);
transform: translateX(-100%) translateY(9px); }
tooltip._bottom._left tip tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 90%;
margin-left: -6px;
position: absolute;
width: 0; }
tooltip._bottom._right tip {
left: 100%;
top: 100%;
-webkit-transform: translateX(9px) translateY(9px);
transform: translateX(9px) translateY(9px); }
tooltip._bottom._right tip tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 10%;
margin-left: -6px;
position: absolute;
width: 0; }
tip-tip .close-button {
cursor: pointer;
float: right;
left: 8%;
margin-top: -7%;
padding: 3px;
position: relative; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment