data-tooltip.css (1331B)
1 /* Add this attribute to the element that needs a tooltip */ 2 [data-tooltip] { 3 position: relative; 4 z-index: 2; 5 cursor: pointer; 6 } 7 8 /* Hide the tooltip content by default */ 9 [data-tooltip]:before, 10 [data-tooltip]:after { 11 visibility: hidden; 12 opacity: 0; 13 pointer-events: none; 14 } 15 16 /* Position tooltip above the element */ 17 [data-tooltip]:before { 18 position: absolute; 19 bottom: 150%; 20 left: 50%; 21 margin-bottom: 5px; 22 margin-left: -80px; 23 padding: 7px; 24 width: 160px; 25 -moz-border-radius: 3px; 26 border-radius: 3px; 27 background-color: #faf7fc; 28 color: #121525; 29 content: attr(data-tooltip); 30 text-align: center; 31 font-size: 14px; 32 line-height: 1.2; 33 box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2), 34 0px 0px 8px -1px rgba(0, 0, 0, 0.19); 35 } 36 37 /* Triangle hack to make tooltip look like a speech bubble */ 38 [data-tooltip]:after { 39 position: absolute; 40 bottom: 150%; 41 left: 50%; 42 margin-left: -5px; 43 width: 0; 44 border-top: 5px solid #faf7fc; 45 border-right: 5px solid transparent; 46 border-left: 5px solid transparent; 47 content: " "; 48 font-size: 0; 49 line-height: 0; 50 box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2); 51 } 52 53 /* Show tooltip content on hover */ 54 [data-tooltip]:hover:before, 55 [data-tooltip]:hover:after { 56 visibility: visible; 57 opacity: 1; 58 }