CSS CSS만으로 툴팁(tooltips)를 나타내는 방법 - 자바/레이어 사용 안함

페이지 정보

작성자 관리자 (49.♡.11.159) 조회 595회 작성일 21-08-24 13:35(마지막 글 수정: 2022년 06월 19일)

본문

일반적으로 툴팁(마우스를 올리면 설명나오는것)을 표현할때 자바스크립트나 레이어를 이용합니다.

하지만 아래 소스는 순수 css만으로 표현하는 방법으로 여러곳 표현 할때 유용하게 사용하면 편합니다.

fe9e43041e24acadb48b2e5a166b2d4f_1629813825_5977.gif
 


[code]

<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>

[/code]


출처는 외국 사이트 돌아다니다가 발견했다고 합니다.


[이 게시물은 관리자님에 의해 2021-08-25 12:51:42 생활코딩 정보에서 이동 됨]
[이 게시물은 관리자님에 의해 2021-08-25 12:52:50 휴게실에서 복사 됨]


댓글목록

등록된 댓글이 없습니다.

사이트안내 | 서비스 이용약관 | 개인정보 처리방침 |
마이링크 | 후원안내 | FAQ | Admin