Pure CSS Tooltip


 / Published in: 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.  

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.