운영하기구축·운영기
조회 수 83 추천 수 1 댓글 5
?

단축키

Prev이전 문서

Next다음 문서

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

단축키

Prev이전 문서

Next다음 문서

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

toolip.png

 

저희가 운영하고 있는 스티커제도가 있는데 포인트는 다들 설명을 안해도 바로 알지만 스티커는 첫 방문하신 분들께는 설명이 필요한 부분이라 요기에 툴팁으로 설명을 적용합니다. 모든 게시판에 적용하려면 복붙을 시작해야 겠습니다 ㅋ

 

요렇게 필요한 부분에 하나씩 툴팁으로 설명을 붙여주려고 합니다.

 

https://www.xetown.com/board/732214

  • profile
    보고하비 2017.09.14 09:39:00
    덕분에 어제 잘 설정 했습니다.
  • profile
    웹지기 2017.09.14 11:21:10
    css 교체해보세요. 저놈들이 설명해주는곳에는 기본적인 디자인으로 해 놓고 데모 페이지에는 이쁘게 꾸며 놓았더라구요. 제가 화이트 배경에 좀더 시인성이 좋게 배경을 좀더 짙게 바꾼 버전입니다.

    #tooltip
    {
    text-align: center;
    text-shadow: 0 1px rgba( 0, 0, 0, .2 );
    line-height: 1.5;
    color: #fff;
    background: #000;
    background: -webkit-gradient( linear, left top, left bottom, from( rgba( 0, 0, 0, .7 ) ), to( rgba( 0, 0, 0, .9 ) ) );
    background: -webkit-linear-gradient( top, rgba( 0, 0, 0, .7 ), rgba( 0, 0, 0, .9 ) );
    background: -moz-linear-gradient( top, rgba( 0, 0, 0, .7 ), rgba( 0, 0, 0, .9 ) );
    background: -ms-radial-gradient( top, rgba( 0, 0, 0, .7 ), rgba( 0, 0, 0, .9 ) );
    background: -o-linear-gradient( top, rgba( 0, 0, 0, .7 ), rgba( 0, 0, 0, .9 ) );
    background: linear-gradient( top, rgba( 0, 0, 0, .7 ), rgba( 0, 0, 0, .9 ) );
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border-top: 1px solid #fff;
    -webkit-box-shadow: 0 1px 2px rgba( 0, 0, 0, .6 );
    -moz-box-shadow: 0 1px 2px rgba( 0, 0, 0, .6 );
    box-shadow: 0 1px 2px rgba( 0, 0, 0, .6 );
    position: absolute;
    z-index: 100;
    padding: 15px;
    font-size:14px;
    }

    #tooltip:after /* triangle decoration */
    {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #000;
    border-top-color: rgba( 0, 0, 0, .9 );
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    margin-left: -10px;
    }

    #tooltip.top:after
    {
    border-top-color: transparent;
    border-bottom: 10px solid #000;
    border-bottom-color: rgba( 0, 0, 0, .9 );
    top: -20px;
    bottom: auto;
    }

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

    #tooltip.right:after
    {
    right: 10px;
    left: auto;
    margin: 0;
    }
  • profile
    보고하비 2017.09.14 11:28:11
    오 감사합니다. 약간 투명하게 보이는거 같네요^^
  • profile
    웹지기 2017.09.14 11:30:26
    네. 약간 고급스러운 느낌이라고나 할까요 ㅋ
  • profile
    보고하비 2017.09.14 11:32:13
    둔해서 모르고 있었는데 배려해주셔서 감사합니다.^^

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