<div class="window">
<div class="titlebar">
<div class="buttons">
<a class="titlebar__btn  close  hint--bottom-right" aria-label="Close"></a>
<a class="titlebar__btn  minimize  hint--bottom-right" aria-label="Minimize"></a>
<a class="titlebar__btn  zoom  hint--bottom-right" aria-label="Zoom"></a>
</div>
Try hovering over different things
</div>
<div class="content">
<div class="position-grid">
<div class="position-grid__cell"><a href="javascript:void(0)" aria-label="bottom-right" class="hint--bottom-right">bottom-right</a></div>
<div class="position-grid__cell"><a href="javascript:void(0)" aria-label="bottom" class="hint--bottom">bottom</a></div>
<div class="position-grid__cell"><a href="javascript:void(0)" aria-label="bottom-left" class="hint--bottom-left">bottom-left</a></div>
<div class="position-grid__cell"><a href="javascript:void(0)" aria-label="right" class="hint--right">right</a></div>
<div class="position-grid__cell"><a>.</a></div>
<div class="position-grid__cell"><a href="javascript:void(0)" aria-label="left" class="hint--left">left</a></div>
<div class="position-grid__cell"><a href="javascript:void(0)" aria-label="top-right" class="hint--top-right">top-right</a></div>
<div class="position-grid__cell"><a href="javascript:void(0)" aria-label="top" class="hint--top">top</a></div>
<div class="position-grid__cell"><a href="javascript:void(0)" aria-label="top-left" class="hint--top-left">top-left</a></div>
</div>
<h3>Color Modifiers</h3>
<p>
<a class="status-icon  hint--bottom-right  hint--error" style="background:indianred" aria-label="This is an error tooltip">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#ffffff" d="M8.27,3L3,8.27V15.73L8.27,21H15.73L21,15.73V8.27L15.73,3M8.41,7L12,10.59L15.59,7L17,8.41L13.41,12L17,15.59L15.59,17L12,13.41L8.41,17L7,15.59L10.59,12L7,8.41"></path>
</svg>
</a>
<a class="status-icon  hint--bottom-right  hint--warning" style="background:orange" aria-label="This is a warning tooltip">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#ffffff" d="M11,4.5H13V15.5H11V4.5M13,17.5V19.5H11V17.5H13Z"></path>
</svg>
</a>
<a class="status-icon  hint--bottom-left  hint--info" style="background:lightblue" aria-label="This is an info tooltip">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#ffffff" d="M12,2A7,7 0 0,1 19,9C19,11.38 17.81,13.47 16,14.74V17A1,1 0 0,1 15,18H9A1,1 0 0,1 8,17V14.74C6.19,13.47 5,11.38 5,9A7,7 0 0,1 12,2M9,21V20H15V21A1,1 0 0,1 14,22H10A1,1 0 0,1 9,21M12,4A5,5 0 0,0 7,9C7,11.05 8.23,12.81 10,13.58V16H14V13.58C15.77,12.81 17,11.05 17,9A5,5 0 0,0 12,4Z"></path>
</svg>
</a>
<a class="status-icon  hint--bottom-left  hint--success" style="background:lightgreen" aria-label="This is success tooltip">
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="#ffffff" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path>
</svg>
</a>
</p>
<h3>Size variations</h3>
<p>
<a class="hint--top  hint--small" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
Small
</a>
<a class="hint--top  hint--medium" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
Medium
</a>
<a class="hint--top  hint--large" style="border: 1px solid #eee;padding:3px 6px;border-radius:4px;" data-hint="You can show very very long sentences inside tooltips by using various available size variation classes.">
Large
</a>
</p>
<h3>Extra</h3>
<p style="margin-bottom:50px">
<a class="hint--bottom  hint--always" aria-label="...which always keep showing">You can also make tooltips...</a>
</p>
<p>
<a class="hint--bottom  hint--rounded" aria-label="We have rounded corners for you">Hmm...So you don't like sharp edges?</a>
</p>
<h3>Effects</h3>
<p>
<a class="hint--top  hint--no-animate" aria-label="Get a simple show/hide tooltip">Dont like animation?</a>
</p>
<p>
<a class="hint--bottom  hint--bounce" aria-label="Bounce">Adding a <code>hint--bounce</code> class gives you that...</a>
</p>
</div>
</div>

@import "https://fonts.googleapis.com/css?family=Lobster";
body{text-align:center;font-family:Arial;background:#D9623F;min-height:100vh;font-size:18px;padding:0;margin:0;color:white;}h1{font-size:6em;text-shadow:0 6px 1px rgba(0,0,0,0.2);font-family:'Lobster',cursive;}h2{font-size:4em;margin:0.5em 0;text-shadow:0 6px 1px rgba(0,0,0,0.2);font-family:'Lobster',cursive;}.version{font-size:0.3em;border-radius:50%;padding:1px 11px;text-shadow:none;top:0px;position:absolute;right:-65px;}@media screen and (max-width: 400px) {body{font-size:15px;}.version{right:0;}}.section{padding:3em 0;position:relative;}.section:after{content:'';position:absolute;bottom:-25px;top:100%;left:0;border-right:100vw solid currentColor;border-bottom:4vw solid transparent;border-top:0;z-index:1;}.section:last-of-type{padding-bottom:2em;}.section:last-of-type:after{display:none;}.section--inverted:after{border-left:100vw solid currentColor;border-right:0;}.hero{background:#7D6EC6;}.hero:after{color:#7D6EC6;}.section:nth-child(2){background:#5BC0EB;}.section:nth-child(2):after{color:#5BC0EB;}.section:nth-child(3){background:#E4CC37;}.section:nth-child(3):after{color:#E4CC37;}.section:nth-child(4){background:#7D6EC6;}.section:nth-child(4):after{color:#7D6EC6;}.section:nth-child(5){background:#D9623F;}.section:nth-child(5):after{color:#D9623F;}.section-inner{max-width:600px;margin:0 auto;}@media screen and (max-width: 650px) {.section-inner{width:auto;padding:0 10px;}}h1,h3{margin:5px 0;}a{color:#1A5A7A;color:#fff;outline:none;text-decoration:none;}.btn{background:white;padding:20px;display:inline-block;border-radius:8px;text-transform:uppercase;transition:0.3s ease;}.btn:hover{transform:scale(1.2);}.download-btn{color:#7D6EC6;margin-top:1em;}.position-grid{display:flex;flex-wrap:wrap;}.position-grid__cell{flex:1 33.33%;font-size:0.8em;}.position-grid__cell a{display:inline-block;width:90%;background:rgba(91,192,235,0.37);color:white;margin:2px 0;padding:16px 5px;}.status-icon{background:indianred;fill:white;border-radius:3px;padding:5px 6px 2px;margin:0 4px;border:1px solid rgba(0,0,0,0.2);}.features ul{padding:0;list-style:none;}.footer{color:rgba(255,255,255,0.7);}.window{background:#fff;width:50vw;min-width:450px;margin:auto;border:1px solid #acacac;border-radius:6px;box-shadow:0px 6px 17px rgba(0,0,0,0.2);cursor:default;}@media screen and (max-width:500px) {.window{width:auto;min-width:0;margin:0 10px;}}.titlebar{background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#ebebeb,color-stop(1,#d5d5d5)));background:-webkit-linear-gradient(top,#ebebeb,#d5d5d5);background:-moz-linear-gradient(top,#ebebeb,#d5d5d5);background:-ms-linear-gradient(top,#ebebeb,#d5d5d5);background:-o-linear-gradient(top,#ebebeb,#d5d5d5);background:linear-gradient(top,#ebebeb,#d5d5d5);color:#4d494d;font-size:11pt;line-height:20px;text-align:center;width:100%;height:20px;border-top:1px solid #f3f1f3;border-bottom:1px solid #b1aeb1;border-top-left-radius:6px;border-top-right-radius:6px;}.buttons{padding-left:8px;padding-top:3px;float:left;line-height:0px;}.titlebar__btn{font-size:9pt;line-height:11px;width:11px;height:11px;border:1px solid rgba(0,0,0,0.15);border-radius:50%;display:inline-block;margin-right:5px;cursor:pointer;}.close{background:#ff5c5c;}.minimize{background:#ffbd4c;}.zoom{background:#00ca56;}.titlebar__btn:hover{border-color:rgba(0,0,0,0.3);}.content{padding:50px 10px;color:#777;}.content a{color:#444;}.content h3{text-transform:uppercase;font-size:0.8em;margin:22px 0 0;padding:4px 0;background:rgba(00,0,0,0.02);color:rgba(0,0,0,0.9);border-bottom:1px solid rgba(0,0,0,0.04);}pre{color:#555;font-size:1.5em;}a svg{fill:rgba(255,255,255,0.6);}a:hover svg{fill:white;}.social-wrap{position:fixed;right:20px;top:20px;}@media screen and (max-width:800px) {.social-wrap{margin-top:20px;position:static;}}