Maybe you want to use something from it

I'm using a modified Hint.css v1.3 for my own project.
Maybe you will be interested with this code :
Use Edit for the HTML version.

Three things:
1 )tip : tooltip in two colors
2) notif : side of the screen tip
3) notif-top : top of the screen tip

Demo tip

/* Tooltip - Très inspiré par : HINT.css - Source: https://github.com/chinchang/hint.css - Demo: http://kushagragour.in/labs/hint/
------------*/

/* switching box model for all elements - Sources : KNACSS & css-tricks / Coyier - Needed for notif-top */
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;}

[tip] ,[notif],[notif-top]{
position: relative;
display: inline-block;
}
[tip]:before, [tip]:after , [notif]:before ,[notif-top]:before{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
pointer-events: none;
}

[tip]:before, [tip]:after {
position: absolute;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0);
z-index: 1030;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
transition: 0.2s ease;
}

[tip]:hover:before, [tip]:hover:after, [tip]:focus:before, [tip]:focus:after {
visibility: visible;
opacity: 0.9;
filter: alpha(opacity=90);
}

[tip]:before {
content: '';
position: absolute;
background: transparent;
border: 6px solid transparent;
z-index: 1031;
}

[tip]:after {
content: attr(tip);
background: #383838;
color: white;
text-shadow: 0 -1px 0px black;
padding: 0.55em 0.9em;
font-size: 0.9em;
white-space: nowrap;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
border-radius: 4px;
}

.tip-top:before {border-top-color: #383838;}
.tip-bottom:before{ border-bottom-color: #383838;}
.tip-left:before{border-left-color: #383838;}
.tip-right:before {border-right-color: #383838;}

/* Defines the positoning logic for the tooltips. */
/* top tooltip */
.tip-top:before{margin-bottom: -12px;}

.tip-top:after{margin-left: -18px;}

.tip-top:before, .tip-top:after {
bottom: 100%;
left: 50%;
}

.tip-top:hover:after, .tip-top:hover:before, .tip-top:focus:after, .tip-top:focus:before {
-webkit-transform: translateY(-8px);
-moz-transform: translateY(-8px);
transform: translateY(-8px);
}

/* bottom tooltip */
.tip-bottom:before {margin-top: -12px;}

.tip-bottom:after {margin-left: -18px;}

.tip-bottom:before, .tip-bottom:after {top: 100%;left: 50%;}

.tip-bottom:hover:after, .tip-bottom:hover:before, .tip-bottom:focus:after, .tip-bottom:focus:before {
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px);
}

/* right tooltip */
.tip-right:before {
margin-left: -12px;
margin-bottom: -6px;
}

.tip-right:after {margin-bottom: -14px;}

.tip-right:before, .tip-right:after {left: 100%;bottom: 50%;}

.tip-right:hover:after, .tip-right:hover:before, .tip-right:focus:after, .tip-right:focus:before {
-webkit-transform: translateX(8px);
-moz-transform: translateX(8px);
transform: translateX(8px);
}

/* left tooltip */
.tip-left:before {
margin-right: -12px;
margin-bottom: -6px;
}

.tip-left:after {margin-bottom: -14px;}

.tip-left:before, .tip-left:after {
right: 100%;
bottom: 50%;
}

.tip-left:hover:after, .tip-left:hover:before, .tip-left:focus:after, .tip-left:focus:before {
-webkit-transform: translateX(-8px);
-moz-transform: translateX(-8px);
transform: translateX(-8px);
}

/* .tip-white pour une variante claire légèrement bleutée et un peu plus grosse */
.tip-white:after {
background: #eee;
color: #5a5a5a;
text-shadow: none;
box-shadow: 4px 4px 8px rgba(0, 0, 120, 0.3);
padding: 0.3em 0.6em;
font-size: 1.3em;
opacity: 0.95;
filter: alpha(opacity=95);
border-radius: 6px;}
.tip-top.tip-white:before {border-top-color: #e3e3e3;}
.tip-bottom.tip-white:before{ border-bottom-color: #e3e3e3;}
.tip-left.tip-white:before{border-left-color: #e3e3e3;}
.tip-right.tip-white:before {border-right-color: #e3e3e3;}

/* notif */

[notif]:before,[notif-top]:before {
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 1040;
pointer-events: none;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
transition: 0.4s ease;
padding: 2.55em 2.9em;
font-size: 1em;
box-shadow: 3px 3px 6px rgba(40, 40, 40, 0.3);
border-radius: 4px;
}

content: attr(notif);
border-radius: 4px;
left: 100%;
bottom: 27%;
width:303px;
}
[notif-top]:before {
content: attr(notif-top);
}

[notif]:hover:before, [notif]:focus:before {
text-align:left;
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
transform: translateX(-300px);
}

[notif-top]:before {
left: 50%;
margin-left: -300px;
margin-top:-90px;
top: 0%;
width:600px;
height:75px;
text-align:center;
}

[notif-top]:hover:before , [notif_top]:focus:before {
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
transform: translateY(100px);
}

/* Three different colors from Bootstrap for notifications : blue (info/default), green (success), red (error) */
[notif]:before , [notif-top]:before , [info]:before{
background: #d9edf7;
color:#3a87ad;
}
[success]:before {
color: #468847;
background: #dff0d8;
z-index: 1041;
}

color: #b94a48;
background: #f2dede;
z-index: 1042;
}

/* CSS for the demo */
#bloc {
text-align:center;
margin-top:10px;}
.demo {
border: 1px dashed #ccc;
padding:35px;
margin:0 auto;
margin-bottom:25px;
background: #f5f5f5;
width:50%;
max-width:700px;
min-width:420px;}