[기타] '자비로운군주'님이 문의하신 스크립트 입니다.

인벤 스크립트에 관심을 가져주셔서 감사합니다.

인장은 물론이고 일반 게시글에도 인벤 스크립트는 동일하게 적용되고 있습니다.
이를 조금 응용하여, 조금 일반적이지 않은 방법을 이용하여 원하시는 형태와 유사한 기능을 구현할 수 있습니다.

차이점은 아래와 같습니다.
- 툴팁의 위치는 항상 고정됩니다. (마우스를 따라 다니지 않습니다.)
- 툴팁이 본문 밖으로 벗어날 경우 잘리게 됩니다.

아래에 소스와 함께 설명을 전달해 드립니다.

혹시 원하시던 형태와 다르거나, 이외에도 궁금하신 내용은 언제든지 글 남겨주세요.

감사합니다.


□ 작동 샘플

---

div 박스를 이용한 가짜 툴팁

이미지와 텍스트 어느쪽으로도 가능합니다.

□ 샘플 소스

---

<!-- 툴팁 호출 -->
<span data-inven-out-css="{'pseudo_tooltip':{'display':'none'}}" data-inven-over-css="{'pseudo_tooltip':{'display':'inline-block'}}"> div 박스를 이용한 가짜 툴팁 </span>

<!-- 공간 제거 -->
<div style="width: 0px; height: 0px; display:block;overflow:show;">

<!-- 툴팁 내용-->
<div data-inven-id="pseudo_tooltip" style="display:none;border:1px solid blue;background-color:skyblue; width:auto; height:auto;position: relative;top:-10px;left:100px;">

<!-- 본문 -->
<img src="https://upload2.inven.co.kr/upload/2016/11/22/per/i12211500208.jpg">
이미지와 텍스트 어느쪽으로도 가능합니다.
<!-- 본문 종료 -->
</div>

</div>


□ 설명

---

<span data-inven-out-css="{'pseudo_tooltip':{'display':'none'}}" data-inven-over-css="{'pseudo_tooltip':{'display':'inline-block'}}"> div 박스를 이용한 가짜 툴팁 </span>
- 툴팁을 불러주는 행입니다. 여러개의 툴팁을 만들 경우에는 경우는 이 부분의 pseudo_tooltip 이름을 각각 고유하게 (손쉽게는 1,2,3,4,5 와 같이)만들어 주시면, 됩니다. 텍스트로 'div 박스를 이용한 가짜 툴팁'이라고 되어 있는 부분은 언제든지 수정가능하며 이미지를 넣으셔도 됩니다.


<div style="width: 0px; height: 0px; display:block;overflow:show;">
- 툴팁이 차지하는 공간을 억지로 없애는 코드입니다. 건드실 필요는 없습니다.


<div data-inven-id="pseudo_tooltip" style="display:none;border:1px solid blue;background-color:skyblue; width:auto; height:auto;position: relative;top:-10px;left:100px;">
- 툴팁 본문의 내용입니다. data-inven-id 와 위에서 수정한 고유한 이름은 항상 일치해야 합니다.
추가로 이 소스에서 각 부분은 입맛에 맞춰 수정해 주세요.
border: 테두리선
background-color: 배경 색
width: 가로 넓이, 숫자px 의 형태로 입력해서 넓이를 정하실 수 있습니다.
height: 세로 넓이, 숫자px 의 형태로 입력해서 넓이를 정하실 수 있습니다.
top:-10px;left:100px; 툴팁의 상대적 위치, -값을 이용하여 위로 올려 주실 수도 있습니다. left 값에 숫자를 넣어서 왼쪽에 여백을 만들 수도 있습니다.


- 이하는 본문 영역은 이미지 / 텍스트 영역 및 위에서 열린 div 박스를 닫는 영역입니다.
<!-- 본문 -->
<img src="https://upload2.inven.co.kr/upload/2016/11/22/per/i12211500208.jpg">
이미지와 텍스트 어느쪽으로도 가능합니다.
<!-- 본문 종료 -->
</div>

</div>



※ 인장에서 이용할 경우와 다르게 게시판에서 이용할 경우는 "줄넘김(엔터)"을 모두 제거해 주세요.
인장에서는 줄넘김에 아무 처리를 하지 않지만 (붙어서 출력됩니다)
게시판의 경우 줄넘김을 편의상 엔터 처리를 해 줍니다. 툴팁이 심하게 아래로 내려와 보일 수 있습니다.

아래와 같이 말이죠.


□ 줄넘김 제거 소스

---

<!-- 툴팁 호출 --><span data-inven-out-css="{'pseudo_tooltip':{'display':'none'}}" data-inven-over-css="{'pseudo_tooltip':{'display':'inline-block'}}"> div 박스를 이용한 가짜 툴팁 </span><!-- 공간 제거 --><div style="width: 0px; height: 0px; display:block;overflow:show;"><!-- 툴팁 내용--><div data-inven-id="pseudo_tooltip" style="display:none;border:1px solid blue;background-color:skyblue; width:auto; height:auto;position: relative;top:-10px;left:100px;"><!-- 본문 --><img src="https://upload2.inven.co.kr/upload/2016/11/22/per/i12211500208.jpg">이미지와 텍스트 어느쪽으로도 가능합니다.<!-- 본문 종료 --></div></div>