SHARE
TWEET

Untitled

a guest Jun 15th, 2019 58 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title></title>
  7. <style id="jsbin-css">
  8. h1{
  9.   cursor:pointer;
  10.   border-bottom:2px solid red;
  11.   display:inline-block;
  12.   position:absolute;
  13.   left:50%;
  14.   transform:translate(-50%);
  15. }
  16. div{
  17.   width:400px;
  18.   display:block;
  19.   margin:200px auto;
  20.  text-align:center;
  21. }
  22. span{
  23.   border-radius:10px;
  24.   display:inline-block;
  25.   transform:translate(-5px,-80px);
  26.   opacity:0;
  27.   background-color:red;
  28.   color:white;
  29.   font-size:30px;
  30.   padding:10px 40px;
  31. }
  32. h1:hover + span{
  33.   opacity:1;
  34.   transition:all 0.3s linear;
  35. }
  36. </style>
  37. </head>
  38. <body>
  39. <div>
  40.   <h1>TOOLTIP</h1>
  41.   <span>Basic Tooltip</span>
  42.   </div>
  43.  
  44.  
  45. <script id="jsbin-source-css" type="text/css">h1{
  46.   cursor:pointer;
  47.   border-bottom:2px solid red;
  48.   display:inline-block;
  49.   position:absolute;
  50.   left:50%;
  51.   transform:translate(-50%);
  52. }
  53. div{
  54.   width:400px;
  55.   display:block;
  56.   margin:200px auto;
  57.  text-align:center;
  58. }
  59. span{
  60.   border-radius:10px;
  61.   display:inline-block;
  62.   transform:translate(-5px,-80px);
  63.   opacity:0;
  64.   background-color:red;
  65.   color:white;
  66.   font-size:30px;
  67.   padding:10px 40px;
  68. }
  69. h1:hover + span{
  70.   opacity:1;
  71.   transition:all 0.3s linear;
  72. }</script>
  73. </body>
  74. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top