Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tooltip/Popover Style
/**
* Stylesheet for a blog post entitled A Medium-like Popover Without Any Dependencies on
* https://www.mayneweb.com/p/a-medium-like-popover-without-any-dependencies/
*
* @auther Daveyon Mayne <hello@mayneweb.com>
*/
.ToolTipShare {
position: absolute;
visibility: hidden;
z-index: 500;
-webkit-transition: none;
transition: none;
top: 0;
left: 0;
}
.ToolTipShare, .ToolTipShare__arrow {
width: 8%;
text-align: center;
}
.ToolTipShare--active {
display: inline-block;
visibility: visible;
-webkit-transition: top 75ms ease-out,left 75ms ease-out;
transition: top 75ms ease-out,left 75ms ease-out;
-webkit-animation: pop-upwards 180ms forwards linear;
animation: pop-upwards 180ms forwards linear;
}
.ToolTipShare__inner {
position: relative;
background-image: linear-gradient(to bottom,rgba(49,49,47,.99),#262625);
background-repeat: repeat-x;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 0 8px;
}
.ToolTipShare .ToolTipShare__arrow {
position: absolute;
bottom: -10px;
margin-left: 40%;
clip: rect(10px 20px 20px 0);
}
.ToolTipShare .ToolTipShare__arrow .ToolTipShare__arrow__span {
display: block;
width: 20px;
height: 20px;
background-color: #262625;
-webkit-transform: rotate(45deg) scale(.5);
transform: rotate(45deg) scale(.5);
}
.ToolTipShare__inner__buttons__item {
background: transparent;
border: none;
outline: none;
cursor: pointer;
height: 44px;
svg {
fill: white;
}
}
@-webkit-keyframes pop-upwards {
0% {
-webkit-transform: matrix(.97,0,0,1,0,12);
transform: matrix(.97,0,0,1,0,12);
opacity: 0
}
20% {
-webkit-transform: matrix(.99,0,0,1,0,2);
transform: matrix(.99,0,0,1,0,2);
opacity: .7
}
40% {
-webkit-transform: matrix(1,0,0,1,0,-1);
transform: matrix(1,0,0,1,0,-1);
opacity: 1
}
70% {
-webkit-transform: matrix(1,0,0,1,0,0);
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
100% {
-webkit-transform: matrix(1,0,0,1,0,0);
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
}
@keyframes pop-upwards {
0% {
-webkit-transform: matrix(.97,0,0,1,0,12);
transform: matrix(.97,0,0,1,0,12);
opacity: 0
}
20% {
-webkit-transform: matrix(.99,0,0,1,0,2);
transform: matrix(.99,0,0,1,0,2);
opacity: .7
}
40% {
-webkit-transform: matrix(1,0,0,1,0,-1);
transform: matrix(1,0,0,1,0,-1);
opacity: 1
}
70% {
-webkit-transform: matrix(1,0,0,1,0,0);
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
100% {
-webkit-transform: matrix(1,0,0,1,0,0);
transform: matrix(1,0,0,1,0,0);
opacity: 1
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.