×

Welcome to TagMyCode

Please login or create account to add a snippet.
 

CSS Tooltip Hovers

0
0
 
1
Language: CSS
Posted by: Philip Rehberger
Added: Sep 14, 2016 12:10 AM
Modified: Sep 14, 2016 2:09 AM
Views: 2095
Tags: absolute active border css focus hover shadow tooltip
  1. a {
  2.     border-bottom:1px solid #bbb;
  3.     color:#666;
  4.     display:inline-block;
  5.     position:relative;
  6.     text-decoration:none;
  7. }
  8. a:hover,
  9. a:focus {
  10.     color:#36c;
  11. }
  12. a:active {
  13.     top:1px;
  14. }
  15.  
  16. /* Tooltip styling */
  17. a[data-tooltip]:after {
  18.     border-top: 8px solid #222;
  19.     border-top: 8px solid hsla(0,0%,0%,.85);
  20.     border-left: 8px solid transparent;
  21.     border-right: 8px solid transparent;
  22.     content: "";
  23.     display: none;
  24.     height: 0;
  25.     width: 0;
  26.     left: 25%;
  27.     position: absolute;
  28. }
  29. a[data-tooltip]:before {
  30.     background: #222;
  31.     background: hsla(0,0%,0%,.85);
  32.     color: #f6f6f6;
  33.     content: attr(data-tooltip);
  34.     display: none;
  35.     font-family: sans-serif;
  36.     font-size: 14px;
  37.     height: 32px;
  38.     left: 0;
  39.     line-height: 32px;
  40.     padding: 0 15px;
  41.     position: absolute;
  42.     text-shadow: 0 1px 1px hsla(0,0%,0%,1);
  43.     white-space: nowrap;
  44.     -webkit-border-radius: 5px;
  45.     -moz-border-radius: 5px;
  46.     -o-border-radius: 5px;
  47.     border-radius: 5px;
  48. }
  49. a[data-tooltip]:hover:after {
  50.     display: block;
  51.     top: -9px;
  52. }
  53. a[data-tooltip]:hover:before {
  54.     display: block;
  55.     top: -41px;
  56. }
  57. a[data-tooltip]:active:after {
  58.     top: -10px;
  59. }
  60. a[data-tooltip]:active:before {
  61.     top: -42px;
  62. }

Write a comment

To post comments, please log in or register.