Skip to content

Instantly share code, notes, and snippets.

@eswak

eswak/after&tooltips.html

Last active August 29, 2015 14:02
Show Gist options
  • Save eswak/243fa887edb2376316d2 to your computer and use it in GitHub Desktop.
Save eswak/243fa887edb2376316d2 to your computer and use it in GitHub Desktop.
Download ZIP
CSS ::after styles & pure css tooltips
Raw
after&tooltips.html
<head>
<style>
section {
padding:2em 1.5em 1.5em 1.5em;
font-size:2em;
background:yellow;
font-family:sans;
position:relative;
overflow:hidden;
}
section:nth-child(odd)::before{
position: absolute;
top:0; left:0;
pointer-events:none;
content: '';
background:yellow;
width:100%; height:15px;
-webkit-transform:rotateZ(0.5deg);
-webkit-transform-origin: top right;
}
section:nth-child(odd)::after{
position: absolute;
bottom:-15px; left:0;
pointer-events:none;
content: '';
background:yellow;
width:100%; height:15px;
-webkit-transform:rotateZ(-0.5deg);
-webkit-transform-origin: bottom left;
}
section:nth-child(odd){
background:red;
}
.tooltip{
position:relative;
border-bottom:1px dashed black;
cursor:help;
}
.tooltip .tooltip-content {
font-size:1rem;
position:absolute;
left:50%; top:0;
-webkit-transform:translateX(-50%) translateY(-100%);
-webkit-transition:opacity .2s;
color:inherit;
border:1px solid black;
border-radius:3px;
padding:.2em .5em;
min-width:200px;
text-align:center;
opacity:0;
}
.tooltip:hover .tooltip-content {
opacity:1;
}
</style>
</head>
<body>
<section>
abcdef
</section>
<section>
ijklmno
<span class="tooltip">
<span class="tooltip-content">
<strong>strong</strong> tooltip content
</span>
tooltip
</span>
</section>
<section>
pqrs
</section>
<section>
tuvw
</section>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment