Advanced Search

Pure CSS Tooltip

/ Published in: HTML
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <a href="#">Roll over here <span>Pure Css Tooltip</span></a>
  2.  
  3. <style type="text/css">
  4.  
  5. /* general */
  6.  
  7. 	body {
  8. 		margin:0;
  9. 		padding:40px 80px;
  10. 		background:#fff;
  11. 		font:70% Arial, Helvetica, sans-serif;
  12. 		color:#555;
  13. 		line-height:180%;
  14. 		}
  15. 	h1, h2{
  16. 		font-size:180%;
  17. 		font-weight:normal;
  18. 		color:#555;
  19. 		}
  20. 	h2{
  21. 		font-size:140%;
  22. 		}	
  23. 	p{
  24. 		margin:1em 0;
  25. 		width:500px;
  26. 		}
  27. 	a{
  28. 		color:#f20;
  29. 		text-decoration:none;
  30. 		}
  31. 	a:hover{
  32. 		color:#999;
  33. 		}
  34.  
  35. 	/* // here comes the goodnes  */	
  36.  
  37. 		a{
  38. 			z-index:10;
  39. 			}
  40. 		a:hover{
  41. 			position:relative;
  42. 			z-index:100;
  43. 			}			
  44. 		a span{
  45. 			display:none;
  46. 			}
  47. 		a:hover span{
  48. 			display:block;
  49. 			position:absolute;
  50. 			float:left;
  51. 			white-space:nowrap;
  52. 			top:-2.2em;
  53. 			left:.5em;
  54. 			background:#fffcd1;
  55. 			border:1px solid #444;
  56. 			color:#444;
  57. 			padding:1px 5px;
  58. 			z-index:10;			
  59. 			}			
  60.  
  61. 	/* // goodnes  */
  62.  
  63. /* // general */
  64.  
  65. </style>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.