| 틀:툴팁 | |
|---|---|
사용문서
|
|
넘겨주기
|
이동하기
|
hover this! ↗[hover me!][hover me!] 이런 틀이에요.
설명
각주처럼 생긴 버튼 위에 마우스를 올리면 박스 툴팁이 나타나는 틀입니다. 각주와 유사한 용도로 사용될 수 있을 것입니다.
아래 이름으로도 사용할 수 있습니다.
- {{ttt}} (tooltip template)
사용법
{{툴팁|버튼|내용}}
여기서 버튼은 마우스를 올리는 툴팁의 버튼 부분, 즉 [여기][여기] 사실 이것도 틀 쓴 겁니다. 용케 마우스를 올려 보셨군요?에 들어갈 내용입니다. 기본값은 1입니다.
내용은 본격적으로 툴팁 박스 안에 들어갈 내용입니다. 사용처는 부연 설명 정도가 되겠지요. 기본값으로 {{{2}}}가 들어가지만, 이를 비워 두고 싶다면 {{툴팁|1|}}처럼 작성하지 않고 파이프 문자만 끝에 놓으면 됩니다. 파이프 문자가 없으면 {{{2}}}가 표시됩니다.
커스텀 접기가 아닌 오로지 CSS만을 이용하였기 때문에, 일일이 틀마다 서로 다른 아이디를 지정해 줄 필요가 없으며 문서 로딩 중 잠깐 보이는 현상도 없습니다.
버튼에 마우스를 올리면 버튼을 기준으로 아래에 툴팁 박스가 나타납니다. 마우스가 버튼을 벗어나면 박스는 바로 사라지기 때문에 일반적으로는 박스 위로 마우스를 올릴 수 없으나, 이때는 버튼에 마우스를 올린 상태에서 좌클릭을 꾹 누른 채 박스로 옮기면 박스가 사라지지 않고 유지됩니다. 모바일에서는 한 번 터치하는 것으로 마우스를 계속 올리고 있는 판정이므로 그다지 상관없습니다.
툴팁 박스 자체는 다크 모드 대응이 되지만, 안타깝게도 툴팁 버튼과 박스 안 첫머리에 오는 파란색은 다크 모드 대응이 되지 않습니다.
사용 예제
| 문법 | 결과 |
|---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.{{툴팁|1|그냥 아무 의미 없이 긴 글이 필요해서 {{exhide|type=wikip|로렘 입숨}}을 쓴 건데용?}} Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.[1][1] 그냥 아무 의미 없이 긴 글이 필요해서 로렘 입숨을 쓴 건데용? Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. |
주의
- 어째서인지 틀 안에서 다음의 문법을 사용하면 마우스를 버튼 위에 올려도 툴팁이 나타나지 않습니다. 원인도 해결 방법도 현재로써는 불명입니다. 사용에 주의하십시오.
- <div>
