Posted By

fredaudet on 07/18/08


Tagged

css html tooltip pure


Versions (?)

Who likes this?

27 people have marked this snippet as a favorite

romanos
SpinZ
ShadowKing
titox
l1r
Hollow
vali29
intrafusion
toxin20
isocele
palimadra
portalpie
kanampo
zander
colingardom
SideSix
bobbym245
seanpowell
dekehooper
brycej
michellebracken
stavros
dajocko
espig
wirenaught
dennywalker
lookingforsome


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.