Skip to content

CSS3 를 이용한 툴팁(Tooltip) 표시

Tip 조회 수 6056 추천 수 0 2013.01.23 15:07:41
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<style>
/* --- base --- */
a.tooltip { position: relative; text-decoration: underline; }
a.tooltip:hover { color: #999999; text-decoration: none !important; }

a.tooltip:hover:after, a.tooltip:hover:before { display: block; }

/* --- tooltip container --- */
a.tooltip:before {
content: attr(rel);
display: block;
width: 140px;
    position: absolute;
z-index: 1000;
    bottom: 150%;
    left: -10px;
    padding: 5px 10px 8px 10px;
text-align: left;
    color: #ffffff;
    display: none;
/* background */
background: #404040; /* CSS2 */
background: -moz-linear-gradient(top, #4e4e4e 0%, #404040 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e4e4e), color-stop(100%,#404040)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* IE10+ */
background: linear-gradient(top, #4e4e4e 0%,#404040 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#404040',GradientType=0 ); /* IE6-9 */
/* border-radius */
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
/* box-shadow */
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
/* text-shadow */
text-shadow: 0px 1px 0px #292929;
}

/* --- tooltip arrow --- */
a.tooltip:after {
content: "";
display: block;
    width: 0;
    height: 0;
    position: absolute;
z-index: 1000;
bottom: 18px;
left: -2px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
border-top: 6px solid #404040;
    display: none;
background: transparent;
}
</style>
</head>
<body>
<br><br><br><br>
<span><a href="#" class="tooltip" rel="이런 저런 내용이나 설명">링크나 제목</a></span>
</body>
</html> 
profile

I see no changes, wake up in the morning and I ask myself

Is life worth living should I blast myself

Things would never be the same.

엮인글 :
http://adminplay.com/169198/9af/trackback

l2zeo님은 글작성 및 댓글 포인트 ...

2013.01.23 15:07:41
*.52.33.196

l2zeo님은 50포인트에 당첨되셨습니다.
List of Articles
번호 제목 글쓴이 날짜 조회 수

Tip SSL 보안인증 로그인,회원가입 적용하기 [1]

  • l2zeo
  • 2012-08-15
  • 조회 수 11800

Tip 그누보드내에서 링크를 이용할때 \ 값이 자동 생성될때는?

  • l2zeo
  • 2012-09-30
  • 조회 수 5229

Tip 서버이전후 Warning: Cannot modify header information - headers already sent by... 뜰때

  • l2zeo
  • 2012-09-30
  • 조회 수 7876

Tip DTD(Document Type Definition) 란?

  • l2zeo
  • 2012-10-02
  • 조회 수 5258

Tip 그누보드4(G4) 변수들

  • l2zeo
  • 2013-01-22
  • 조회 수 49533

Tip css 폰트 설정시 브라우저 제약없이 비슷하게 보이게 하는방법은?? file

  • l2zeo
  • 2013-01-23
  • 조회 수 5274

Tip 마우스 드래그시 영역 색상 변경 [selection pseudo-element(dropped)] file

  • l2zeo
  • 2013-01-23
  • 조회 수 4234

Tip [Lazy Load Plugin for jQuery] 효율적인 이미지 로딩 file

  • l2zeo
  • 2013-01-23
  • 조회 수 10219

Tip 페이스북 담벼락에 자동 게시하는 법

  • l2zeo
  • 2013-01-23
  • 조회 수 9616

Tip [caching tip] js, css 캐싱 팁

  • l2zeo
  • 2013-01-23
  • 조회 수 5335

Tip CSS3 를 이용한 툴팁(Tooltip) 표시 [1]

  • l2zeo
  • 2013-01-23
  • 조회 수 6056

Tip Mini Help System with jQuery file [1]

  • l2zeo
  • 2013-01-23
  • 조회 수 5613

Tip 썸네일 생성이 되지 않을때 확인할것 file

  • l2zeo
  • 2013-01-24
  • 조회 수 7442

Tip 모바일에서 동영상 크기 지정해서 보여줄때.

  • l2zeo
  • 2013-01-24
  • 조회 수 6896

Tip 모바일에서도 이미지 리사이징 기능 적용하기

  • l2zeo
  • 2013-01-24
  • 조회 수 51801

Tip 마우스 오버할때 아이디 안보이게 하기 file

  • l2zeo
  • 2013-02-03
  • 조회 수 5768

Tip CSS shorthand properties (단축 속성) [1]

  • l2zeo
  • 2013-02-26
  • 조회 수 5362

Tip 일정 포인트 이상은 적립안되게 하기

  • l2zeo
  • 2013-03-15
  • 조회 수 5074

Tip 포인트가 마이너스일때 = 포인트 마이너스 회원들 포인트를 0으로 ...

  • l2zeo
  • 2013-03-15
  • 조회 수 9547

Tip 웹 서비스 구현시 캐시 구현을 남발해서는 안되는 이유?

  • l2zeo
  • 2013-03-18
  • 조회 수 6572

Copyright ADMINPLAY corp. All rights reserved.

abcXYZ, 세종대왕,1234

abcXYZ, 세종대왕,1234