Posted By

j4kp07 on 07/06/10


Tagged

corners tooltip ROUNDED CSS3


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

DesignByWilliam


CSS3 Tooltips


 / Published in: CSS
 

URL: http://css-tricks.com/css-content/

  1. a {
  2. color: #900;
  3. text-decoration: none;
  4. }
  5.  
  6. a:hover {
  7. color: red;
  8. position: relative;
  9. }
  10.  
  11. a[title]:hover:after {
  12. content: attr(title);
  13. padding: 4px 8px;
  14. color: #333;
  15. position: absolute;
  16. left: 0;
  17. top: 100%;
  18. white-space: nowrap;
  19. z-index: 20px;
  20. -moz-border-radius: 5px;
  21. -webkit-border-radius: 5px;
  22. border-radius: 5px;
  23. -moz-box-shadow: 0px 0px 4px #222;
  24. -webkit-box-shadow: 0px 0px 4px #222;
  25. box-shadow: 0px 0px 4px #222;
  26. background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  27. background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
  28. }

Report this snippet  

You need to login to post a comment.