저희가 운영하고 있는 스티커제도가 있는데 포인트는 다들 설명을 안해도 바로 알지만 스티커는 첫 방문하신 분들께는 설명이 필요한 부분이라 요기에 툴팁으로 설명을 적용합니다. 모든 게시판에 적용하려면 복붙을 시작해야 겠습니다 ㅋ
요렇게 필요한 부분에 하나씩 툴팁으로 설명을 붙여주려고 합니다.
https://xetown.com/board/732214
-
덕분에 어제 잘 설정 했습니다. -
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;
} -
오 감사합니다. 약간 투명하게 보이는거 같네요^^
-
네. 약간 고급스러운 느낌이라고나 할까요 ㅋ
-
둔해서 모르고 있었는데 배려해주셔서 감사합니다.^^