A Pen by Mingkai Cao on CodePen.
Created
August 28, 2019 07:52
-
-
Save caomingkai/52194a937a0fc1794a8a70e2a84087ea to your computer and use it in GitHub Desktop.
Tooltip
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
<div rool='tooltip' class='tooltip' id='tooltip'> | |
Jing Han | |
<div rool='tooltip text' class='tooltip__text' id="tooltipText"> | |
sdflkjljjsdfsdfsdfsdf | |
</div> | |
</div> |
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
function e(id) {return document.getElementById(id);} | |
const tooltip = e('tooltip'); | |
const tooltipText = e('tooltipText'); | |
const url = 'https://www.googleapis.com/books/v1/volumes?q=flowers'; | |
tooltip.onmouseover = hoverHandler; | |
function hoverHandler() { | |
fetch(url) | |
.then(function(res) { | |
return res.json(); | |
}) | |
.then(function(myJson) { | |
console.log(myJson.items[0].volumeInfo); | |
}) | |
.catch(function(err) { | |
console.log(err); | |
}) | |
} |
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
.tooltip { | |
display: inline-block; | |
position: relative; | |
border: 1px solid red; | |
margin: 150px; | |
} | |
.tooltip .tooltip__text { | |
width: 150px; | |
height: 130px; | |
position: absolute; | |
bottom: 100%; | |
left: 50%; | |
transform: translate(-50%, -5px); | |
border: 1px solid green; | |
visibility: hidden; | |
opacity: 0; | |
background-color: grey; | |
color: white; | |
text-align: center; | |
transition: opacity 0.5s ease-in-out; | |
} | |
.tooltip .tooltip__text::after { | |
content: ""; | |
display: block; | |
border-color: grey transparent transparent transparent; | |
border-style: solid; | |
border-width: 5px; | |
position: absolute; | |
top: 100%; | |
left: 50%; | |
margin-left: -5px; | |
} | |
.tooltip:hover .tooltip__text { | |
visibility: visible; | |
opacity: 1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment