기존에 레이아웃에서 로드해서 사용하던 툴팁 생성용 css와 jquery를 따로 떼어내서 애드온을 만들어 봤습니다.
만들고보니 쓸모가 있을까... 하는 생각이 들기도 합니다. ㅎㅎㅎ
jquery나 애드온의 정규식이 허접해서 모든 환경에 잘 적용될 수 있을지도 의문이네요 @.@
말풍선 애드온 0.1
애드온을 적용 한다음 말풍선이 필요한곳에 pr_tooltip 클래스를 추가해 주시면 해당 태그에 마우스를 가져가면 말풍선을 띄워주는 애드온 입니다.
추가로 지정 가능한 속성은 아래와 같습니다.
pr_uid : 애드온에서 관리하기위해 부여하는 번호입니다. 영문, 숫자, 하이픈, 언더바로만 구성할 수 있습니다.
pr_color : 말풍선의 색을 지정합니다.
pr_position : 말풍선의 위치를 지정합니다.
title : 말풍선에 띄울 글을 지정합니다.
사용 가능한 색상 코드는 아래와 같습니다. 색상은 bootstrap에서 따왔습니다.
태그에 pr_color="primary" 이런식으로 사용하시면 됩니다.
사용가능한 말풍선 위치 지정 코드는 아래와 같습니다.
말풍선을 우상단에 띄우고 싶다면 pr_position="t_right" 로 적어 주시면 됩니다.
이 애드온의 사용법은 크게 두가지로 나눌 수 있습니다.
1. 직접 코딩
아래처럼 말풍선이 필요한곳의 class에 pr_tooltip을 추가하고 title, pr_color, pr_position을 지정 합니다.
마우스를 가져가면 Point History라고 적힌 노란 말풍선이 상단 중앙에 뜨게 됩니다.
2. 애드온에서 관리
아래처럼 말풍선이 필요한곳의 class에 pr_tooltip을 추가하고 pr_uid만 지정을 합니다.
이상태에서는 마우스를 가져가도 말풍선은이 뜨지안습니다.
애드온 설정화면에서 위에 지정한 pr_uid번호인 info-001의 옵션값들을 지정 후 저장합니다.
이후부터는 해당 태그에 마우스를 가져가면 말풍선이 뜨게 됩니다.
우선순위
태그에 모든 속성을 지정하고 pr_uid까지 지정했어도 해당 uid에대한 설정값이 애드온에 있다면 애드온에 설정한값이 우선합니다.
아래처럼 pr_uid가 001로 지정하고 모든 속성을 코딩했어도 애드온 설정에 001의 설정값이 있다면 기존 코딩은 무시되고 애드온 설정값으로 변경되어 출력됩니다.
위의 애드온 설정창의 uid: 002의 경우처럼 title만 지정된 경우는 다른 값은 코딩값대로 유지되며 title만 변경되어 출력합니다.
[문하우스의 적용팁]
https://moonhouse.co.kr/423318
p.s 색상을 알아보기 쉽게 blue, orange, red 같이 쉽게 적용한 파일 올립니다.
문하우스 프로그램들은 수정한 파일로 적용됩니다.
zip 다운로드 애드온
