Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Tool Tips
#2
Code: (Select All)

<!DOCTYPE html>
<html lang=EN>
<head>
<style>
label[abc]{
display:inline-block;
position:relative;
}
label[abc]:hover{
cursor:pointer;
}
label[abc]:after{
position:absolute;
font-size:12px;
opacity:0;
top:100%;
left:0;
content:"This is how we do tool-tips in CSS.";
white-space:nowrap;
border-radius: 5px; 
box-shadow: 0px 0px 2px #222; 
background-image: linear-gradient(#eeeeee, #cccccc);
margin:7px;
padding:3px 7px;
cursor:default;
transition:.5s all;
}
label[abc]:hover:after{
display:block;
opacity:.66;
transition-delay:1s;
}
</style>
</head>
<body>
<div style="margin: 50px auto; text-align:center;">
<label abc>https://qb64phoenix.com</label>
</div>
</body>
</html>

Funny how we were both working on the same concept but in different media, today.

Pete
Reply


Messages In This Thread
Tool Tips - by SMcNeill - 10-17-2024, 05:37 PM
RE: Tool Tips - by Pete - 10-18-2024, 01:05 AM



Users browsing this thread: 1 Guest(s)