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

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

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

 

 

말풍선 애드온 0.1

pr_tooltip_v0.1.zip

 

 

애드온을 적용 한다음 말풍선이 필요한곳에 pr_tooltip 클래스를 추가해 주시면 해당 태그에 마우스를 가져가면 말풍선을 띄워주는 애드온 입니다.

추가로 지정 가능한 속성은 아래와 같습니다.

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

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

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

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

 

사용 가능한 색상 코드는 아래와 같습니다. 색상은 bootstrap에서 따왔습니다.

태그에 pr_color="primary" 이런식으로 사용하시면 됩니다.

pr_color.png

 

사용가능한 말풍선 위치 지정 코드는 아래와 같습니다.

말풍선을 우상단에 띄우고 싶다면 pr_position="t_right" 로 적어 주시면 됩니다.

pr_position.png

 

 

이 애드온의 사용법은 크게 두가지로 나눌 수 있습니다.

1. 직접 코딩

 

아래처럼 말풍선이 필요한곳의 class에 pr_tooltip을 추가하고 title, pr_color, pr_position을 지정 합니다.

마우스를 가져가면 Point History라고 적힌 노란 말풍선이 상단 중앙에 뜨게 됩니다.

ex1.png

 

2. 애드온에서 관리

 

아래처럼 말풍선이 필요한곳의 class에 pr_tooltip을 추가하고 pr_uid만 지정을 합니다.

이상태에서는 마우스를 가져가도 말풍선은이 뜨지안습니다.

ex2.png

 

애드온 설정화면에서 위에 지정한 pr_uid번호인 info-001의 옵션값들을 지정 후 저장합니다.

이후부터는 해당 태그에 마우스를 가져가면 말풍선이 뜨게 됩니다.

admin.png

 

우선순위

태그에 모든 속성을 지정하고 pr_uid까지 지정했어도 해당 uid에대한 설정값이 애드온에 있다면 애드온에 설정한값이 우선합니다.

아래처럼 pr_uid가 001로 지정하고 모든 속성을 코딩했어도 애드온 설정에 001의 설정값이 있다면 기존 코딩은 무시되고 애드온 설정값으로 변경되어 출력됩니다.

ex3.png

 

위의 애드온 설정창의 uid: 002의 경우처럼 title만 지정된 경우는 다른 값은 코딩값대로 유지되며 title만 변경되어 출력합니다.

 

 

  • ?
    칼럼 2017.10.27 01:40:39
    감사합니다!
  • ?
    moonsooter 2017.10.27 05:59:59
    필요한 기능입니다. 감사합니다.
  • profile
    달콤한인생 2017.10.27 08:28:02
    감사합니다!
  • ?
    차도남 2017.10.27 13:40:56
    긴 문장이 불필요할때 활용하기 좋은 애드온이네요~
    멋진 애드온 배포해주셔서 감사합니다~~
  • profile
    간장게장 2017.11.02 15:45:45 Files첨부 (1)

    정말 유용한 애드온 감사합니다. ^^;;

    요렇게 사용하고 있습니다.

     

    tooltip.jpg

     

    추천이라는 기능을 방문하는 분들은 자치 오해하시는 것 같더라고요.

    글 본문 내용이 맘에 들지 않거나 나쁘다고 생각하면 비추천을 선택하는 경향이..

     

    제가 의도한 것은 기사(글) 자체가 도움이 되었는지 아니면 아무 쓸데없는 글인지를 

    평가받고 싶은 것이라...

     

    어쨌거나 툴팁이 아주 유용하게 사용되고 있습니다. ^^

  • ?
    필또 2017.11.03 18:24:19
    대박!!! 정말 감사합니다.
  • profile
    팔공산 2017.11.04 23:19:57

    멋진 자료 감사합니다.
    라이믹스에서는 잘 작동하는데요.

    아래 환경에서는 홈피가 죽네요. xe탓인지 php버전 탓인지 모르겠네요.
    xe_version : 1.8.46
    php : 5.3.3

     

    xe_version : 1.8.46

    php : 7.0.1 에서 작동이 정상적으로 되는 것을 보면 xe탓은 아니고 php 버전 탓 아니면 다른 애드온과의 충돌인 듯 합니다. 

  • profile
    prologos 2017.11.04 23:31:46
    라이믹스 환경도 php 5.3.3인가요?
  • profile
    팔공산 2017.11.04 23:36:46
    라이믹스는 php : 7.0.1 입니다.
    위에 글도 약간 수정했습니다.
  • profile
    prologos 2017.11.05 04:12:15
    애드온 설정중 관리할 말풍선 목록에 내용이 있을때나 없을때나 동일한 문제가 일어나는지 확인해 보시구요.

    pr_tooltip.addon.php파일의 15라인 근처: $ttLists[$item[0]] = (object)['color' => $item[1], 'position' => $item[2], 'title' => $item[3]];의 내용을 아래처럼 수정 해 보세요.

    $ttLists[$item[0]] = new stdClass();
    $ttLists[$item[0]]->color = $item[1];
    $ttLists[$item[0]]->position = $item[2];
    $ttLists[$item[0]]->title = $item[3];

    그래도 문제가 발생한다면 php 버전을 올려보시거나 1번의 방법으로만 사용하셔야 할꺼 같습니다.
  • profile
    팔공산 2017.11.06 18:36:43 Files첨부 (1)

    답글 감사합니다.^.^

    일단 처음 코드로 애드온 실행하면 어떤 경우 문제가 발생하는게 아니라 아예 전체 홈피가 백지가 되어 버립니다.

    알려 주신 코드 삽입하니 정상적으로 잘 작동됩니다.

     

    참고로 css3pie_js 애드온 과 같이 실행하니 아래 이미지와 같이 색상과 위치가 적용이 안됩니다.

    https://www.xpressengine.com/index.php?mid=download&package_id=20951206

    img_003.jpg

  • profile
    영흥도우럭 2017.11.07 17:48:05
    오늘에야 적용을 했는데...완전 이쁘네요 ^______^
  • profile
    팔공산 2017.11.07 19:26:38 Files첨부 (1)

    제가 활용하는 말풍선(툴팁)애드온과 위젯의 콜라보네이션입니다.

    좋은 애드온 감사합니다.

    http://moonhouse.co.kr/xe/423318

    img001.jpg


서버에 요청 중입니다. 잠시만 기다려 주십시오...