틀:툴팁/CSS: 두 판 사이의 차이
< 틀:툴팁
편집 요약 없음 |
편집 요약 없음 |
||
| (같은 사용자의 중간 판 5개는 보이지 않습니다) | |||
| 1번째 줄: | 1번째 줄: | ||
.tooltip { | .tooltip { | ||
display: inline-block; | display: inline-block; /* 메시지를 텍스트 아래에 표시 */ | ||
} | } | ||
.tooltip: | |||
display: | /* 표시 텍스트 */ | ||
position: absolute; | .tooltip .tooltip-display { | ||
text-decoration: inherit; /* 상위 요소에 의해 취소선, 밑줄 등이 적용됐을 때 툴팁이 적용된 텍스트에도 적용 */ | |||
} | |||
/* 툴팁 메시지 */ | |||
.tooltip .tooltip-msg { | |||
display: none; /* 마우스를 대지 않으면 숨김 */ | |||
position: absolute; /* 메시지를 텍스트 아래에 표시 */ | |||
/* .messagebox 개조 */ | |||
padding: 0.25em 0.75em; | padding: 0.25em 0.75em; | ||
width: auto; | width: auto; | ||
font-size: 100%; | font-size: 100%; | ||
} | } | ||
.tooltip-msg img { | .tooltip:hover .tooltip-msg { | ||
display: block; /* 텍스트에 마우스를 대면 메시지 표시 */ | |||
} | |||
/* 메시지 아이콘 */ | |||
.tooltip .tooltip-msg img { | |||
margin-right: 0.5em !important; | margin-right: 0.5em !important; | ||
} | } | ||
/* <onlyinclude>{{#css:틀:툴팁/CSS}}</onlyinclude> */ | /* <onlyinclude>{{#css:틀:툴팁/CSS}}</onlyinclude> */ | ||
2024년 8월 17일 (토) 21:28 기준 최신판
.tooltip {
display: inline-block; /* 메시지를 텍스트 아래에 표시 */
}
/* 표시 텍스트 */
.tooltip .tooltip-display {
text-decoration: inherit; /* 상위 요소에 의해 취소선, 밑줄 등이 적용됐을 때 툴팁이 적용된 텍스트에도 적용 */
}
/* 툴팁 메시지 */
.tooltip .tooltip-msg {
display: none; /* 마우스를 대지 않으면 숨김 */
position: absolute; /* 메시지를 텍스트 아래에 표시 */
/* .messagebox 개조 */
padding: 0.25em 0.75em;
width: auto;
font-size: 100%;
}
.tooltip:hover .tooltip-msg {
display: block; /* 텍스트에 마우스를 대면 메시지 표시 */
}
/* 메시지 아이콘 */
.tooltip .tooltip-msg img {
margin-right: 0.5em !important;
}
/* <onlyinclude>{{#css:틀:툴팁/CSS}}</onlyinclude> */