public
Created

A `position: pointer` demonstration

  • Download Gist
demo.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.tooltip {
position: pointer;
left: 10px;
top: 10px;
width: auto;
height: auto;
padding: 5px;
background-color: rgba(0,0,0,.8);
color: white;
border-radius: 5px;
box-shadow: 0 0 3px black;
}
 
.tooltipping:not(:hover) + .tooltip {
display: none;
}
</style>
</head>
<body>
<button class="tooltipping">Hover over me for more info!</button>
<div class="tooltip">
Here's some more info!
</div>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.