깔끔한 CSS 툴팁 > html

출처 : http://jsfiddle.net/eu81273/jmw3w74v/

<h2>CSS Only Tooltip</h2>

<br/><br/>

<span data-tooltip-text="<font color='red'>툴팁</font>">TOOLTIP TEST</span>

<br/><br/>

<span data-tooltip-text="My Heart leaps up when I behold A rainbow in the sky: So was it when my life began; So be it now I am a man So be it when I shall grow old, Or let me die! The Child is father of the Man; And I could wish my days to be Bound each to by natural piety.">THIS IS LONG TOOLTIP</span>

<br/><br/>

<style type="text/css">

/*

css-only-tooltip version 1.0.0

ⓒ 2015 AHN JAE-HA http://github.com/eu81273

MIT License

*/

[data-tooltip-text]:hover {

position: relative;

}

[data-tooltip-text]:hover:after {

background-color: #000000;

background-color: rgba(0, 0, 0, 0.8);

-webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);

-moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);

box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

color: #FFFFFF;

font-size: 12px;

content: attr(data-tooltip-text);

    margin-bottom: 10px;

bottom: 100%;

left: 0;

padding: 7px 12px;

position: absolute;

width: auto;

min-width: 50px;

max-width: 300px;

word-wrap: break-word;

white-space: pre;

z-index: 9999;

}

</style>