Skip to content

Instantly share code, notes, and snippets.

@Kcko

Kcko/tooltip.html

Last active November 30, 2020 15:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kcko/0ad28424c37b291a075fd38808e7cdc5 to your computer and use it in GitHub Desktop.
Save Kcko/0ad28424c37b291a075fd38808e7cdc5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tooltip.html
<!--
https://jsbin.com/fetikedayu/1/edit?html,css,js,output
https://jsbin.com/zofifoceli/edit?html,css,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