Ajax Loader
×
HTML
<a>Hover Me! <i>Here is the new version of <br />Pure CSS arrow with border (tooltip)<br />with left arrow</i></a>
1
<a>Hover Me! <i>Here is the new version of <br />Pure CSS arrow with border (tooltip)<br />with left arrow</i></a>
 
CSS
body { 
1
body { 
2
  background: #32373D; 
3
  text-align:left; 
4
  padding: 60px 30% 50px;
5
}
6
 
7
a {
8
  position: relative;
9
  cursor: pointer;
10
  font: normal normal 85% sans-serif;
11
  color: white;
12
  text-shadow: #090A0B 0 -1px;
13
  display: inline-block;
14
 
15
}
16
 
17
a > i {
18
  text-align: center;
19
  font: italic normal 90% Georgia, serif;
20
  line-height: 150%;
21
  color: black;
22
  text-shadow: white 0 1px;
23
  background: #DDD;
24
  background-clip: padding-box;
25
  box-shadow: 0 0px 2px rgba(0, 0, 0, 0.5);
26
  border: 5px solid #111;
27
  border: 5px solid rgba(0, 0, 0, 0.5);
28
  border-radius: 3px;
29
  position: absolute;
30
  width: 250px;
31
  left: 110%;
32
  margin-left:5px;
33
  padding: 10px 0;
34
  bottom:0%;
35
  margin-bottom: -25px;
36
  visibility:hidden;
37
  opacity:0;
38
  -webkit-transition: opacity 0.5s linear;
39
  -moz-transition: opacity 0.5s linear;
40
  -ms-transition: opacity 0.5s linear;
41
  -o-transition: opacity 0.5s linear;
42
  transition: opacity 0.5s linear;
43
}
44
 
45
a > i:before, a > i:after {
46
  content: "";
47
  position: absolute;
48
 
49
  border-bottom: 10px solid transparent;
50
    border-right:10px solid transparent;
51
  top: 50%;
52
  left: 0%;
53
  margin-left: -10px;
54
}
55
 
56
a > i:before {
57
  border-top: 13px solid #111;
58
  border-bottom: 13px solid #111; 
59
 
60
  border-right:9px solid #111;
61
  
62
    border-top: 10px solid transparent;
63
  border-left: 10px solid transparent;
64
  border-bottom:10px solid transparent;
65
 
66
  margin-left: -22px;
67
  z-index: 1;
68
 
69
}
70
 
71
a > i:after{
72
 
73
  border-top: 10px solid #DDD;
74
  border-bottom: 10px solid #DDD; 
75
 
76
  border-right:10px solid #DDD;
77
  
78
    border-top: 10px solid transparent;
79
  border-left: 10px solid transparent;
80
  border-bottom:10px solid transparent;
81
 
82
  margin-left: -18px;
83
  z-index: 1;
84
}
85
 
86
a:hover > i {
87
  visibility: visible;
88
  opacity: 1;
89
}
 

Untitled

CSSDeck G+