말풍선(툴팁) 애드온을 이용한 위젯설정

설치를 하고 이렇게 재미있고 활용이 무궁할 것 같은 애드온을 어떻게 적용할 것 인가를 생각하다가 위젯에 적용해 보기로 하고 지금 수정하고 있는 Mh_Hover 위젯에 적용해 보았습니다.

 

[적용방법]

class="pr_tooltip" 

pr_uid : 애드온에서 관리하기위해 부여하는 번호입니다. 영문, 숫자, 하이픈, 언더바로만 구성할 수 있습니다.

pr_color : 말풍선의 색을 지정합니다.

pr_position : 말풍선의 위치를 지정합니다.

title : 말풍선에 띄울 글을 지정합니다.

 

1. 위젯의 *.class.php에 추가 : pr_color 와 pr_position을 위젯의 설정에서 선택

// 풍선도움말 칼라

$tooltip_color = $args->tooltip_color;

$widget_info->tooltip_color = $tooltip_color;

 

// 풍선도움말 위치

$tooltip_location = $args->tooltip_location;

$widget_info->tooltip_location = $tooltip_location;

 

2. info.xml에 추가

<group>

<title xml:lang="ko">말풍선(툴팁) 애드온 설치시 적용</title>

<var id="tooltip_color">

<name xml:lang="ko">풍선도움말 색상</name>

<type>select</type>

<description>말풍선(툴팁) 애드온 설치가 필수입니다</description>

<options><name>black</name><value>black</value></options>

<options><name>blue</name><value>primary</value></options>

<options><name>gray</name><value>secondary</value></options>

<options><name>green</name><value>success</value></options>

<options><name>red</name><value>danger</value></options>

<options><name>orange</name><value>warning</value></options>

<options><name>sky</name><value>info</value></options>

<options><name>white</name><value>light</value></options>

<options><name>dark</name><value>dark</value></options>

</var>

<var id="tooltip_location">

<name xml:lang="ko">풍선도움말 위치</name>

<type>select</type>

<options><name>top</name><value>top</value></options>

<options><name>bottom</name><value>bottom</value></options>

<options><name>left</name><value>left</value></options>

<options><name>right</name><value>right</value></options>

<options><name>top_left</name><value>t_left</value></options>

<options><name>top_right</name><value>t_right</value></options>

<options><name>bottom_left</name><value>b_left</value></options>

<options><name>bottom_right</name><value>b_right</value></options>

</var>

</group>

 

3. list.html : 위젯의 확장변수 url선택시 바로가기 부분에 마우스 오보시 풍선도움말 띄우는 코드 추가

<a href=<!--@if($widget_info->d_home == 'Y')-->"{$oDocument->extra_value}" class="pr_tooltip" pr_color="{$widget_info->tooltip_color}" pr_position="{$widget_info->tooltip_location}" title="{$oDocument->extra_value} 바로연결"<!--@end-->>

 

 

p.s 색상을 알아보기 쉽게 blue, orange, red 같이 쉽게 적용한 파일 올립니다.

문하우스 프로그램들은 수정한 파일로 적용됩니다.

pr_tooltip.zip