Your Ad Here

advanced code snippet search

Pure CSS Tooltip

 / Published in: HTML
 
Expand | Embed | Plain Text 
  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
Posted By: curtismchale on August 2, 2010

I've seen this before and still think that it's non-semantic. Screen readers will hit a span and then what? It's extra content that's not needed for them. Stick with the title= or a javascript solution. At least that's my opinion.

Posted By: StefanVilonel on July 11, 2011

I disagree with you, Curtis. The idea of having a tool tip is for informative purposes. So why would it be a problem if the blind would also have access to this information.

But I do feel the code is bloated. I prefer using a jquery option.

You need to login to post a comment.