말풍선(툴팁) 애드온

기존에 레이아웃에서 로드해서 사용하던 툴팁 생성용 css와 jquery를 따로 떼어내서 애드온을 만들어 봤습니다.

만들고보니 쓸모가 있을까... 하는 생각이 들기도 합니다. ㅎㅎㅎ

jquery나 애드온의 정규식이 허접해서 모든 환경에 잘 적용될 수 있을지도 의문이네요 @.@

말풍선 애드온 0.1

pr_tooltip_v0.1.zip

애드온을 적용 한다음 말풍선이 필요한곳에 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만 변경되어 출력합니다.