Animated Tooltips With Very Little Coding


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

Using a sibling relationship in CSS allows all kinds of tooltips effects without scripting or a lot of coding. There are a bunch of different effects on the page and the possibilities are limited only by imagination.


Copy this code and paste it in your HTML
  1. The HTML:
  2. <div class="tipWrapper">
  3. <span class="tipbox spanlink">In the horizontal</span>
  4. <div class="tiphor"> You can get some wild effects by
  5. playing with the borders and shadows.</div></div>
  6.  
  7. <div id="vslide" class="tipWrapper"><span id="tboxv" class="tipbox spanlink">or in the vertical</span>
  8. <div class="tipvert">This tooltip can go up or down to fit into any design.</div></div>
  9.  
  10. CSS for horizontal:
  11.  
  12. .tiphor {
  13. position:absolute;
  14. visibility:hidden;
  15. overflow:hidden;
  16. z-index:0;
  17. top:0px;
  18. left:0px;
  19. width:4px;
  20. height:4.5em;
  21. background-color:white;
  22. }
  23. .tipbox:hover {
  24. visibility:visible;
  25. width:150px;
  26. height:4em;
  27. overflow:hidden;
  28. }
  29. .spanlink:hover~.tiphor {
  30. left:150px;
  31. transition:left 2s;
  32. width:160px;
  33. visibility:visible;
  34. }
  35.  
  36. CSS for vertical:
  37.  
  38. #tboxv {
  39. width:160px;
  40. }
  41. .tipvert {
  42. position:absolute;
  43. visibility:hidden;
  44. overflow:hidden;
  45. z-index:0;
  46. top:0px;
  47. left:0px;
  48. width:4px;
  49. height:4.5em;
  50. background-color:white;
  51. }
  52. .spanlink:hover~.tipvert {
  53. top:-5em;
  54. transition:top 2s;
  55. width:160px;
  56. visibility:visible;
  57. }
  58. #hereseven {
  59. margin-top:8em;
  60. }

URL: http://coboldinosaur.com/pages/animated-tooltips.html

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.