<html>
<head>
<meta charset="UTF-8">
<title>Kyo͞o Tooltip - A tool tip implementation done in CSS alone</title>
<link href="kyoo_style.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Kyo͞o Tooltip</h1>
<h2 class="heading">Demo with various positioning specialization</h2>
<p>
<a href="#" class="kyoo-tooltip">
I'm positioned on top
<span class="kyootip kyootip--top">Yeah boy! ↑</span>
</a>
</p>
<p>
<a href="#" class="kyoo-tooltip">
Now give me some right
<span class="kyootip kyootip--right"> → Yeah baby!</span>
</a>
</p>
<p>
<a href="#" class="kyoo-tooltip">
Position me at the bottom
<span class="kyootip kyootip--bottom">Yeah boy! ↓</span>
</a>
</p>
<p>
<a href="#" class="kyoo-tooltip">
I don't wanna be left out
<span class="kyootip kyootip--left">Yeah boy! ←</span>
</a>
</p>
</body>
</html>
/* =Reset
/* You shouldn't care about this code.
/* I suppose you have your own reset
/* ----------------------------------- */
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* =Base style (and this as well.)
/* ----------------------------------- */
body {
/* background gradient - http://uigradients.com/ */
background: -webkit-linear-gradient(90deg, #DAE2F8 10%, #D6A4A4 90%); /* Chrome 10+, Saf5.1+ */
background: -moz-linear-gradient(90deg, #DAE2F8 10%, #D6A4A4 90%); /* FF3.6+ */
background: -ms-linear-gradient(90deg, #DAE2F8 10%, #D6A4A4 90%); /* IE10 */
background: -o-linear-gradient(90deg, #DAE2F8 10%, #D6A4A4 90%); /* Opera 11.10+ */
background: linear-gradient(90deg, #DAE2F8 10%, #D6A4A4 90%); /* W3C */
color: #626262;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 24px;
text-align: center;
margin: 5% auto;
max-width: 500px;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
a {
color: #CB786C;
}
p {
margin-bottom: 20px;
text-align: left;
}
h1, h2 {
font-size: 40px
line-height: 30px;
margin-bottom: 20px;
text-align: left;
}
img {
border: 1px solid #EEE;
padding: 1px;
}
.heading {
font-size: 20px;
margin: 6% auto 3%;
padding-top: 20px;
font-weight: 300;
}
.pull-l {
float: left;
margin-right: 10px;
}
a.kyoo-tooltip {
border-bottom: 1px solid #DDB0B0;
padding-bottom: 3px;
}
/* =Kyoo Tooltip style
/* You may grab the code from here on
/* ----------------------------------- */
/* Tooltip wrapper -------*/
/* Add this class to HTML element you so desire Kyoo Tooltip to appear */
.kyoo-tooltip {
position: relative;
}
.kyoo-tooltip .kyootip {
opacity: 0;
pointer-events: none;
visibility: hidden;
z-index: 99999;
-webkit-transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-o-transition: .3s ease-in-out;
transition: 0.3s;
}
.kyoo-tooltip:hover .kyootip {
opacity: 1;
visibility: visible;
}
/* Kyoo Tooltip base style -------*/
.kyootip {
background-color: #222;
background-color: rgba(0,0,0,.85);
color: #fff;
font: normal 12px/16px Arial;
padding: 6px 10px;
position: absolute;
text-align: center;
text-decoration: none;
text-shadow: none;
z-index: 4;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-moz-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
-o-box-shadow: 0 2px 8px rgba(0,0,0,0.2);
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.kyootip:after {
content: " ";
font-size: 0;
line-height: 0;
position: absolute;
width: 0;
z-index: 1;
}
/* Top position style -------*/
.kyootip--top {
bottom: 130%;
left: 50%;
margin-bottom: -10px;
margin-left: -60px;
width: 100px;
}
/* Tooltip arrow */
.kyootip--top:after {
border-top: 5px solid #222;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
bottom: -5px;
left: 50%;
margin-left: -5px;
}
/* When hovered, move tooltip at the bottom */
.kyoo-tooltip:hover .kyootip--top {
margin-bottom: 0;
}
/* Right position style -------*/
.kyootip--right {
left: 100%;
margin-left: -5px;
top: -5px;
width: 100px;
}
/* Tooltip arrow */
.kyootip--right:after {
border-top: 5px solid transparent;
border-right: 5px solid #222;
border-bottom: 5px solid transparent;
left: -5px; /* Offset value to pull to the left */
margin-top: -5px;
top: 50%;
}
/* When hovered, move tooltip a bit to the right */
.kyoo-tooltip:hover .kyootip--right {
margin-left: 10px;
}
.kyootip--bottom {
top: 130%;
left: 50%;
margin-top: -10px;
margin-left: -60px;
width: 100px;
}
/* Tooltip arrow */
.kyootip--bottom:after {
border-bottom: 5px solid #222;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
top: -5px;
left: 50%;
margin-left: -5px;
}
/* When hovered, move tooltip at the bottom */
.kyoo-tooltip:hover .kyootip--bottom {
margin-top: 0;
}
/* Left position style -------*/
.kyootip--left {
right: 100%;
margin-right: -5px;
top: -5px;
width: 100px;
}
/* Tooltip arrow */
.kyootip--left:after {
border-top: 5px solid transparent;
border-left: 5px solid #222;
border-bottom: 5px solid transparent;
margin-top: -5px;
right: -5px; /* Offset value to pull to the right */
top: 50%;
}
/* When hovered, move tooltip a bit to the right */
.kyoo-tooltip:hover .kyootip--left {
margin-right: 10px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.