css-tooltip/docs/style.css

Only CSS lightweight, minimal and simple tooltips

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Droid Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: .9rem;
    font-weight: 400;
    color: #444;
    line-height: 1.6;
    width: 90%;
    max-width: 38rem;
    margin: 3rem auto;
}
h1 {
    font-size: 150%;
    font-weight: 700;
    border-bottom: solid #ddd 1px;
}
h2 {
    font-size: 120%;
    font-weight: 500;
    border-bottom: solid #ddd 1px;
    margin-top: 2rem;
}
a {
    color: #399;
    font-weight: 500;
    text-decoration: none;
}
a:hover {
    color: #000;
}
img {
    display: block;
    max-width: 100%;
}
pre, code {
    font-family : "Andale Mono", "Monaco", "Lucida Console", "Menlo", "Consolas", "Roboto Mono", "Liberation Mono", monospace;
    background: #cff;
    border-radius: 3px;
}
pre {
    overflow-x: scroll;
}
code {
    padding: 3px 5px;
    font-size: 80%;
}
hr {
    margin: 2rem 0;
    background: transparent;
    border: none;
    border-bottom: solid #ddd 1px;
}

.examples {
    border: dotted #bee 2px;
    border-radius: 3px;
    padding: .5rem 2rem;
}

.github-corner:hover .octo-arm{ animation:octocat-wave 560ms ease-in-out}
@keyframes octocat-wave{
    0%,100%{ transform:rotate(0) }
    20%,60%{ transform:rotate(-25deg) }
    40%,80%{ transform:rotate(10deg) }
}
@media (max-width:500px){
    .github-corner:hover .octo-arm{ animation:none}
    .github-corner .octo-arm{ animation:octocat-wave 560ms ease-in-out }
}


[data-tooltip]{ border-bottom: solid #9ff 2px }
[data-tooltip]:before {
    font-weight: 300;
    font-size: 80%;
}