추천 드리고 싶은 툴팁, tooltip 이쁘게 만들기

추천 드리고 싶은 툴팁 tooltip 이쁘게 만들기

 

오직 style sheet 만으로 간단하면서 이쁘게 되어 있는 툴팁 치곤 매우 좋네요.

 

 

html

<div class="wrap">
	<div><span data-tooltip="너무너무 귀여워">어피치</span></div>
</div>

 

style 

.wrap{padding:200px;text-align:center;background:#e0e0e0}

/* TOOLTIP */
[data-tooltip]{position:relative;}
[data-tooltip]:before,
[data-tooltip]:after{visibility:hidden;opacity:0;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;transition:all .2s ease;font-size:11px;font-family:dotum;letter-spacing:-1px;}
[data-tooltip]:before{content:attr(data-tooltip);height:13px;position:absolute;top:-20px;padding:5px 10px;border-radius:5px;color:#fff;background:#025272;box-shadow:0 3px 8px rgba(165, 165, 165, 0.5);}
[data-tooltip]:after{content: '';border-left:5px solid transparent;top:2px;border-right:5px solid transparent;border-top:5px solid #025272;}
[data-tooltip]:not([data-tooltip=""]):hover:before{visibility:visible;opacity:1;top:-30px}
[data-tooltip]:not([data-tooltip=""]):hover:after{visibility:visible;opacity:1;top:-8px}

 

결과

 

 

펌 사이트 : 

https://codepen.io/asrahi/pen/LwzGQW

only CSS Tooltip