Skip to content

Instantly share code, notes, and snippets.

@Kcko

Kcko/tooltip.html

Last active Jun 10, 2020
Embed
What would you like to do?
<!-- https://jsbin.com/fetikedayu/1/edit?html,css,js,output -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.c-tooltip {
display: inline-block;
vertical-align: middle;
margin: -2px 0 0 5px;
position: relative;
font-weight: 400;
height: 16px;
width: 16px;
margin: 250px;
border: 1px solid red;
}
.c-tooltip__text {
display: block;
visibility: hidden;
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
top: calc(100% + 20px);
transform: translate3d(-50%,20px,0);
width: 320px;
max-width: 80vw;
padding: 20px 20px 0;
background-color: #fff;
color: #000;
transition: opacity .3s,transform .3s,visibility 0s .3s;
border-radius: 4px;
filter: drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 20px rgba(0,0,0,.1));
}
.c-tooltip__text:before
{
position: absolute;
background: transparent;
content: "";
top: -50px;
height: 100px;
width: 100%;
left: 0;
}
.c-tooltip__pointer {
position: absolute;
left: 50%;
top: -7px;
display: block;
width: 14px;
height: 14px;
transform: translateX(-50%) rotate(45deg);
background-color: #fff;
}
.c-tooltip--visible .c-tooltip__text,
.c-tooltip:hover .c-tooltip__text,
.c-tooltip__text:hover
{
visibility: visible;
opacity: 1;
pointer-events: all;
transform: translate3d(-50%,0,0);
transition: visibility 0s .3s,opacity .3s .3s,transform .3s .3s;
z-index: 100;
}
</style>
</head>
<body>
<div class="c-tooltip">
<span class="c-tooltip__icon">
<svg viewBox="0 0 16 16">
<path d="M0 8C0 3.584 3.584 0 8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16C3.584 16 0 12.416 0 8ZM9.73605 8.13602L10.456 7.40002C10.912 6.94402 11.2 6.30402 11.2 5.60002C11.2 3.83202 9.76805 2.40002 8.00005 2.40002C6.23205 2.40002 4.80005 3.83202 4.80005 5.60002L6.40005 5.60002C6.40005 4.72002 7.12005 4.00002 8.00005 4.00002C8.88005 4.00002 9.60005 4.72002 9.60005 5.60002C9.60005 6.04002 9.42405 6.44002 9.12805 6.72802L8.13605 7.73602C7.56005 8.32002 7.20005 9.12002 7.20005 10L7.20005 10.4L8.80005 10.4C8.80005 9.20002 9.16005 8.72002 9.73605 8.13602ZM8.79995 13.6L7.19995 13.6L7.19995 12L8.79995 12L8.79995 13.6Z"></path>
</svg>
</span>
<div class="c-tooltip__text">
<span class="c-tooltip__pointer"></span>
<p><a class="c-tooltip__link" href="https://www.vzhurudolu.cz/prirucka/metrika-lps">LPS (Lighthouse Performance Score)</a> je hlavní skóre nástroje Lighthouse pro tuto konkrétní stránku. LPS měříme každý den syntetickým testem.</p>
<p>LPS se nepromítá do celkového zhodnocení stránky.</p>
<p><strong>Optimální hodnota ja 90&nbsp;% a více.</strong></p>
</div>
</div>
</body>
</html>
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.