운영하기구축·운영기
조회 수 187 추천 수 4 댓글 31
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 댓글로 가기 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 첨부

사이트에서 정착을 시키고 싶은 그런 것들은 나름 공지나 설명을 통해 회원들에게 안내를 하고는 하지만 가입한 즉시 얼마 안된 회원들에게는 보다 직관적으로 간략하게 이해를 시킬 수 있는 무언가가 필요합니다. 

그래서 사이트의 대표적 기능에 툴팁을 이용해서 설명을 달면 좋을 것 같다는 생각에 적용해 보았습니다.

 

tooltip.png

 

 

태그연관글 출력 애드온에서 출력해 주는 타이틀 쪽에 물음표로 시선을 유도해서 

툴팁으로 설명을 열람해 보도록 해 보았습니다.

 

https://osvaldas.info/elegant-css-and-jquery-tooltip-responsive-mobile-friendly

 

간단하게 스크립트와 css를 레이아웃에 넣어두고 원하는 곳곳에 툴팁으로 설명이 나오게 해 놓으면 좋을 것 같네요.

  • profile
    웹지기 2017.09.13 15:37:12
    풍선 박스가 예쁘지 않네요.

    #tooltip
    {
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
    font-size:14px;
    border-radius:5px;
    }


    예쁘게 해주실분!
  • ?
    Jack 2017.09.15 02:29:26
    투명도를 살짝주고 빗금(//)을 희미하게 배경으로쓰면 좀더 이쁘지않을까요 ㅎㅎ
  • profile
    웹지기 2017.09.15 09:01:24
    네~ 어제 투명도를 주고 조금 꾸며 놓았습니다.
    https://goo.gl/6B9bR6
  • profile
    다이오니 2017.09.13 16:04:00
    괜찮은 아이디어 입니다.

    매번 새로운 기능을 도입해서 공지사항으로 안내를 해도 안읽어보는 분들은 여전히 안읽어보시거든요. 아님 그 기능을 까먹거나.

    저렇게 툴팁으로 해놓으면 금방 알기도 쉽고, 호기심에 한번 더 살펴볼 것 같습니다.
    좋은 아이디어네요. 역쒸 웹지기님~
  • profile
    웹지기 2017.09.13 16:11:18
    공지를 읽어볼까 ? 하는데 꽤나 시간이 걸리더라구요 ㅋ 그래서 꼭 안내가 필요하다고 생각하는 요소 요소 근처에 툴팁으로 해 놓으면 좋을 것 같아서 우선 글 읽기 화면에서 제가 중요하게 생각하는 해시태그의 의미를 전달해 보려고 적용해 봤어요.

    글쓰기 페이지에서도 필요한 것이 있다면 적당한 위치에 시선유도를 할 만한 것으로 노출해 놓고 툴팁으로 설명해 놓으면 좋을 것 같아요. 특히 글쓰기 창에서 새창으로 링크를 통해 설명을 읽게 하는게 번거롭게 느껴질 수도 있기도 하구요.
  • ?
    휴리파파 2017.09.13 16:09:55
    웹지기님은 참 대단하신게..
    사이트에 대한 사랑이 정말 남다른 것 같습니다 ㅎㅎ
  • profile
    웹지기 2017.09.13 16:12:24
    운영자니까 누구보다 애착이 있죠 ㅋ
    그런데 운영자로서 이점은 좀 아쉽다 하는 부분들이 생기더라구요. 공지는 공지일뿐... 팝업은 뜨는 즉시 닫아야해! 이런 회원들이 많아서 ㅋㅋ

    좀더 편하고 친숙하게 고지를 할 수 있다면 방법을 찾아서 적용해 주는게 최선이더라구요.
    1
  • profile
    윤삼 2017.09.13 16:29:21
    완전 공감 가는 말씀입니다.
    저도 사용자 중심 감각을 좀 가져야 할 텐데...
    언제나 많이 배웁니다!
  • profile
    웹지기 2017.09.13 16:30:45
    저도 처음에는 모르다가 여러 회원님들 중 일부 회원들의 습성이 반복적으로 나타나는 것을 목격하다 보면 조금 안타까운 생각에 이런 저런 방법을 자꾸 찾아보게 되더라구요. 궁하면 뭔가 답을 찾게 됩니다 ㅋ
  • ?
    휴리파파 2017.09.13 16:35:18
    운영자라면 당연하겠지만 ㅎㅎㅎ
    운영자 분들 중에서도 으뜸일 것 같아요 ㅎㅎ
  • profile
    웹지기 2017.09.13 16:39:42 Files첨부 (1)

    회원정보 수정하는 곳에 이미지이름을

    name.png

    이렇게 사용해야 한다고 까지 알려 주지만 그냥 사진을 올립니다 ㅋㅋ

     

    물론 이용규칙에 이미지이름은 닉네임이 표시되도록 만들어야 된다고 고지도 되어 있죠 ㅋ

    이런 저런 모든 것을 다 무시하시는 처음 오신 분들 대단하시다는 생각을 늘 하게 되죠 ㅋ

     

     

    저거 안해 놓았을때는 무지하게 많은 잘못된 이미지이름이 등록이 되었다죠 ㅋ

    프로필이미지에도 올리고 저기도 올리고 막올리고 ㅋ

  • profile
    웹지기 2017.09.13 16:25:08

    실제로 구경을 하실분들은

    https://goo.gl/XCoCtL

  • profile
    보고하비 2017.09.13 16:44:53
    좋은 팁입니다. 일단 스크랩 해놓고 나중에 도전해봐야겠네요 ^^
  • profile
    웹지기 2017.09.13 16:46:54
    쉬워요 ㅋㅋ 저 링크에서 제시하는 것 중 아마 스크립트 적용만 살짝 XE에 맞게.. 라이믹스라면 그냥 될지도 모르겠네요.
    제이큐어리 인지 뭔지 때문에요 ㅋ
  • profile
    보고하비 2017.09.13 16:50:56
    ㅋ 저한테는 안쉬워요 ㅎㅎ
  • profile
    웹지기 2017.09.13 16:54:16

    1.레이아웃에서 이미 불러오고 있는 스크립트에 추가해 주세요. ( 라이믹스라면 링크 사이트에서 제공하는 스크립트 그대로라도 될지도 모르겠네요)

    // 툴팁
    jQuery( function($)
    {
    var targets = $( '[rel~=tooltip]' ),
    target = false,
    tooltip = false,
    title = false;

    targets.bind( 'mouseenter', function()
    {
    target = $( this );
    tip = target.attr( 'title' );
    tooltip = $( '<div id="tooltip"></div>' );

    if( !tip || tip == '' )
    return false;

    target.removeAttr( 'title' );
    tooltip.css( 'opacity', 0 )
    .html( tip )
    .appendTo( 'body' );

    var init_tooltip = function()
    {
    if( $( window ).width() < tooltip.outerWidth() * 1.5 )
    tooltip.css( 'max-width', $( window ).width() / 2 );
    else
    tooltip.css( 'max-width', 340 );

    var pos_left = target.offset().left + ( target.outerWidth() / 2 ) - ( tooltip.outerWidth() / 2 ),
    pos_top = target.offset().top - tooltip.outerHeight() - 20;

    if( pos_left < 0 )
    {
    pos_left = target.offset().left + target.outerWidth() / 2 - 20;
    tooltip.addClass( 'left' );
    }
    else
    tooltip.removeClass( 'left' );

    if( pos_left + tooltip.outerWidth() > $( window ).width() )
    {
    pos_left = target.offset().left - tooltip.outerWidth() + target.outerWidth() / 2 + 20;
    tooltip.addClass( 'right' );
    }
    else
    tooltip.removeClass( 'right' );

    if( pos_top < 0 )
    {
    var pos_top = target.offset().top + target.outerHeight();
    tooltip.addClass( 'top' );
    }
    else
    tooltip.removeClass( 'top' );

    tooltip.css( { left: pos_left, top: pos_top } )
    .animate( { top: '+=10', opacity: 1 }, 50 );
    };

    init_tooltip();
    $( window ).resize( init_tooltip );

    var remove_tooltip = function()
    {
    tooltip.animate( { top: '-=10', opacity: 0 }, 50, function()
    {
    $( this ).remove();
    });

    target.attr( 'title', tip );
    };

    target.bind( 'mouseleave', remove_tooltip );
    tooltip.bind( 'click', remove_tooltip );
    });
    });



    2.사용하시는 레이아웃에 css에 추가해주세요.
    #tooltip
    {
    text-align: center;
    color: #fff;
    background: #111;
    position: absolute;
    z-index: 100;
    padding: 15px;
    font-size:14px;
    border-radius:5px;
    }

    #tooltip:after /* triangle decoration */
    {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #111;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
    }

    #tooltip.top:after
    {
    border-top-color: transparent;
    border-bottom: 10px solid #111;
    top: -20px;
    bottom: auto;
    }

    #tooltip.left:after
    {
    left: 10px;
    margin: 0;
    }

    #tooltip.right:after
    {
    right: 10px;
    left: auto;
    margin: 0;
    }




    3.툴팁으로 보여주고 싶은 것을 보드스킨이나 레이아웃 등에
    <abbr title="해시태그 연관글은 본문에 들어간 해시태그를 기반으로 관련된 글을 보여주고 있습니다. 글 작성할때 주제가 되는 해시태그를 사용하면 같은 성격의 글과 함께 보여질 수 있습니다." rel="tooltip">문구</abbr>

    이렇게 넣으세요.

  • profile
    보고하비 2017.09.13 19:25:13
    1번항목이 잘 이해가 안됩니다.^^ 어디에 붙이라는건지...
  • profile
    웹지기 2017.09.13 19:37:17

    저것을 별도의 abc.js 로 만들어 로드할 수도 있지만 어차피 레이아웃 전역에 쓸 거니 사용하시는 PC와 모바일 레이아웃에 사용되는 스크립트 js 파일에 추가해서 사용하시라는 설명입니다.

    사용하시는 모바일 레이아웃의 경우는 /js 폴더에  common.js 라고 있을 겁니다. 거기에 넣어서 사용하세요. PC레이아웃도 비슷한 파일에 넣으시면 됩니다.

  • profile
    보고하비 2017.09.13 20:01:18
    네 잘됩니다. 덕분에 또 하나 건저갑니다 .. 맨날 이렇게 얻어먹어서 민망하네요 ^^
  • profile
    웹지기 2017.09.13 16:55:49
    저희 태그연관글 애드온 제목 출력하는 곳에서는 모바일과 PC에서 폰트어썸 높이가 살짝 달라서

    {$tag_relation->title}<!--@if(!Mobile::isMobileCheckByAgent())--> <abbr title="해시태그 연관글은 본문에 들어간 해시태그를 기반으로 관련된 글을 보여주고 있습니다. 글 작성할때 주제가 되는 해시태그를 사용하면 같은 성격의 글과 함께 보여질 수 있습니다." rel="tooltip"><i class="fa fa-question-circle" aria-hidden="true" style="font-size:18px; vertical-align:-5%;color:#2F9D27;"></i></abbr><!--@else--> <abbr title="해시태그 연관글은 본문에 들어간 해시태그를 기반으로 관련된 글을 보여주고 있습니다. 글 작성할때 주제가 되는 해시태그를 사용하면 같은 성격의 글과 함께 보여질 수 있습니다." rel="tooltip"><i class="fa fa-question-circle" aria-hidden="true" style="font-size:20px;color:#2F9D27;"></i></abbr><!--@end-->

    이렇게 넣은거에요.
  • profile
    웹지기 2017.09.13 16:59:50
    아참, 운영하시는 사이트 슈퍼캐시 쓰실텐데 슈퍼캐시 설정에 팝업애드온 쿠키 예외로 등록좀 해주세요. 아마 비회원들은 메인에서 뜨는 팝업때문에 방문하기 싫을 겁니다. 쿠키 적용이 안되요. 계속 뜹니다. 가끔 문제점 봐드리려고 방문해서 보면 그것이....
  • profile
    보고하비 2017.09.13 17:21:41
    아 그런가요 알겠습니다..
  • profile

    Cap 2017-09-13 17-25-20-374.png

  • profile
    웹지기 2017.09.13 17:27:12
    별도로 캐시할 쿠키 입력란에 애드온에서 사용하는 쿠키이름을 넣으셔야 합니다. 애드온 파일 열어보시면 코드 속에 쿠키가 있을거에요.
  • profile
    보고하비 2017.09.13 19:24:14
    쿠키는 적용했습니다. 적용이 된건지는 모르겠네요 ^^
  • profile
    웹지기 2017.09.13 19:37:58
    네. 이제 팝업이 안떠서 살겠습니다.
  • ?
    이브이 2017.09.14 08:52:22
    덕분에 저도 깨닫고 예외 쿠키에 넣었습니다 ㄷㄷㄷㄷ
  • profile
    보고하비 2017.09.13 17:26:53
    슈퍼캐시 설정부분이 이미지 첨부한 부분인것 같은데.. 쿠키 예외 적용을 어떻게 해야되는건가요?
  • profile
    보고하비 2017.09.13 17:20:54
    와! 감사합니다..^^ 저녁에 해볼게요 ...
  • profile
    스트렌져 2017.09.14 17:31:28

    적용하니까 잘되네요...

  • profile
    웹지기 2017.09.14 17:45:38
    저희도 어제에 이어 오늘도 필요한 부분에 물음표를 몇개 더 띄워 놓았답니다~

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