CSS3 implements ToolTip, and css3 implements tooltip.

CSS3 implements ToolTip, and css3 implements tooltip.

See the following code for more information)

HTML

1 <! DOCTYPE html> 2 
CSS
1 html {2 width: 100%; 3 height: 100%; 4/* The text size does not change when the screen is rotated; */5-webkit-text-size-adjust: none; 6} 7 body {8 margin: 0; 9 padding: 0; 10 width: 100%; 11 height: 100%; 12 background: # 47c9af; 13 color: # 74777b; 14 font-weight: 300; 15 font-size: 1.5em; 16 font-family: "Raleway", "Arial"; 17} 18 ul {19 list-style: none; 20 padding: 0; 21 margin: 0; 22} 23 a: link, a: visited, a: focus {24 text-decoration: none; 25 outline: none; 26} 27 28 *, *: after, *: before {29/* padding (fill) and border (border) do not affect the original size of the box; */30-webkit-box-sizing: border-box; 31} 32 *: after, *: before {33 display: block; 34 content :""; 35} 36/* clear floating */37 *: after {38 clear: both; 39} 40 41/* Navgaitor */42. nav {43 width: 800px; 44 height: 300px; 45 margin: 200px auto; 46} 47. nav li {48 display: inline-block; 49 margin: 0 1em; 50} 51. tooltip {52 display: inline-block; 53 font-weight: 700; 54 color: rgba (0.3, 0,); 55 padding: 0.15em 0.25em 0 0; 56 position: relative; 57 z-index: 999; 58 transition: 0.4 s; 59} 60. tooltip: hover {61 color: rgba (255,255,255, 1); 62} 63. tooltip-content {64 position: absolute; 65 z-index: 9999; 66 width: 80px; 67 height: 80px; 68/* span vertical center: 69 left: 50%; the left side of the span is half the width of a from the left side of a; 70 margin-left:-40px; half the width of left shift relative to itself; 71 bottom: 100%; the distance between the bottom of the span and the bottom of a is twice the distance of a, which is just on the top of a; 72 */73 left: 50%; 74 margin-left:-40px; 75 bottom: 100%; 76 margin-bottom: 20px; 77 text-align: center; 78 padding-top: 22px; 79/* apply the svg file for background image; */80 background: url (.. /img/tooltip1.svg) no-repeat center; 81 opacity: 0; 82 transition: 0.4 s; 83} 84. tooltip-content I {85 font-style: normal; 86 font-size: 30px; 87 color: # 47c9af; 88 opacity: 0; 89 transition: 0.3 s; 90} 91. tooltip-effect-1. tooltip-content {92/* 93 translate3d (0, 10px, 0): elements move down 10px along the Y axis; 94 rotate3d (, 1, 45deg): elements are on the X axis, Y axis and Z axis rotate 45 °; 95 transform-origin: 50% 100%; the element is the center point calculated by itself; 96 */97 transform: translate3d (0, 10px, 0) rotate3d (50%, 1, 45deg); 98 transform-origin: 100% 100; 99. tooltip-effect-1. tooltip-content I {101/* 102 elements are scaled 0 times (minimized) on the X and Y axes, 1 times (not scaled) on the Z axis, and 103 */104 transform: scale3d (105, 1); 106. tooltip-effect-2. tooltip-content {107 transform: translate3d (0, 20px, 0); 108} 109. tooltip-effect-2. tooltip-content I {110 transform: translate3d (0, 15px, 0); 111} 112. tooltip-effect-3. tooltip-content {113 transform: translate3d (0, 10px, 0) rotate3d (114, 0, 90deg); 50% transform-origin: 100% 115; 116. tooltip-effect-3. tooltip-content I {117 transform: scale3d (118, 1); 119. tooltip-effect-4. tooltip-content {120 transform: translate3d (0,-20px, 0); 121} 122. tooltip-effect-4. tooltip-content I {123 transform: translate3d (0, 20px, 0); 124} 125. tooltip-effect-5. tooltip-content {126 transform: scale3d (127, 1); 50% transform-origin: 100% 128; 129. tooltip-effect-5. tooltip-content I {130 transform: translate3d (0, 20px, 0); 131} 132/* indicates that all effects are 0; */133. tooltip: hover. tooltip-content, 134. tooltip: hover. tooltip-content I {135 opacity: 1; 136 transform: translate3d (137, 0) rotate3d (,) scale3d (, 1}
Note: The Icon Font is referenced from Font Awesome Icons. Download link: course link