Last active
September 28, 2017 16:01
-
-
Save paulwellnerbou/be0e38fef6731b6f935c1f56dc6b7880 to your computer and use it in GitHub Desktop.
CSS for embedded hover footnotes in Ghost 1.0 default theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Thanks to w3schools for the base sample implementation of tooltips with CSS only: | |
https://www.w3schools.com/howto/howto_css_tooltip.asp */ | |
.tooltip { | |
position: relative; | |
} | |
.tooltip .tooltiptext { | |
visibility: hidden; | |
width: 240px; | |
background-color: #555; | |
color: #fff; | |
text-align: center; | |
border-radius: 6px; | |
padding: 5px 0; | |
position: absolute; | |
z-index: 1; | |
bottom: 90%; | |
left: 50%; | |
margin-left: -120px; | |
opacity: 0; | |
transition: opacity .5s; | |
line-height: 1.1em; | |
font-size: 90%; | |
padding: .5em; | |
} | |
.tooltip .tooltiptext * { | |
color: #fff; | |
} | |
.tooltip .tooltiptext::after { | |
content: ""; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
margin-left: -5px; | |
border-width: 5px; | |
border-style: solid; | |
border-color: #555 transparent transparent transparent; | |
} | |
.tooltip:hover .tooltiptext { | |
visibility: visible; | |
opacity: 1; | |
} | |
.tooltip a.footnote-backref { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment