Guest User

Untitled

a guest
Apr 23rd, 2018
75
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.41 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Test</title>
  6. <style>
  7. body,
  8. p {
  9. margin: 1rem;
  10. padding: 0;
  11. }
  12.  
  13. body,
  14. * {
  15. font-family: Verdana;
  16. }
  17.  
  18. .tooltip {
  19. position: relative;
  20. }
  21. .tooltip:after {
  22. display: table;
  23. position: absolute;
  24.  
  25. visibility: hidden;
  26. opacity: 0;
  27.  
  28. color: rgba(255, 255, 255, .8);
  29. font-size: 12px;
  30. letter-spacing: -1px;
  31. background-color: rgba(100, 100, 100, .9);
  32.  
  33. content: attr(data-title);
  34.  
  35. top: 0;
  36. left: 0;
  37.  
  38. padding: .2rem .4rem;
  39. border-radius: .2rem;
  40.  
  41. transition: all ease .2s;
  42. -webkit-transition: all ease .2s;
  43.  
  44. transform: translateY(-120%);
  45. -webkit-transform: translateY(-120%);
  46.  
  47. text-transform: uppercase;
  48. text-orientation: -2px;
  49. }
  50. .tooltip:hover:after {
  51. visibility: initial;
  52. opacity: 1;
  53.  
  54. transform: translateY(-100%);
  55. -webkit-transform: translateY(-100%);
  56. }
  57.  
  58. .tooltip.tooltip-bottom:after {
  59. top: auto;
  60. bottom: 0;
  61.  
  62. transform: translateY(120%);
  63. -webkit-transform: translateY(120%);
  64. }
  65. .tooltip.tooltip-bottom:hover:after {
  66. transform: translateY(100%);
  67. -webkit-transform: translateY(100%);
  68. }
  69.  
  70. .tooltip.tooltip-left:after {
  71. transform: translate(-120%, 0);
  72. -webkit-transform: translate(-120%, 0);
  73. }
  74. .tooltip.tooltip-left:hover:after {
  75. transform: translate(-100%, 0);
  76. -webkit-transform: translate(-100%, 0);
  77. }
  78.  
  79. .tooltip.tooltip-right:after {
  80. left: auto;
  81. right: 0;
  82.  
  83. transform: translate(120%, 0);
  84. -webkit-transform: translate(120%, 0);
  85. }
  86. .tooltip.tooltip-right:hover:after {
  87. transform: translate(100%, 0);
  88. -webkit-transform: translate(100%, 0);
  89. }
  90. </style>
  91. </head>
  92. <body>
  93.  
  94. <p>Lorem Ipsum, dizgi ve baskı <span class="tooltip tooltip-bottom" data-title="Test Bir Ki">endüstrisinde</span> kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık <span class="tooltip" data-title="Test Bir Ki">endüstrisinde</span> yazılımları ile popüler olmuştur.</p>
  95.  
  96. </body>
  97. </html>
Add Comment
Please, Sign In to add comment