사용자:Larodi/클릭하면/styles.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
오페라: Ctrl-F5를 입력.

.wrap{
  position: relative; 
  display: inline-block;
  }
.box{
  width: 150px; 
  background: #242F9B; 
  padding: 10px; 
  border-radius: 5px; 
  color: #ffffff; 
  text-align: center;
}
.tooltip{
  position:absolute; 
  left:0px; 
  top:52px; 
  background: #646FD4; 
  padding: 10px; 
  border-radius:5px; 
  color: #fff; 
  text-align: center; 
  display: none;
}
.tooltip:after{
  display: block; 
  content: ''; 
  position: absolute; 
  top: -7px; 
  left:15px; 
  width: 0px; 
  height: 0px; 
  border-top: 8px solid none; 
  border-left: 8px solid transparent; 
  border-right: 8px solid transparent; 
  border-bottom: 8px solid #646FD4;
} 
.wrap:active .tooltip{display: block;}