Κάντε αντιγραφή τον παρακάτω κώδικα και μετά ακολουθήστε τον 

εικονογραφημένο οδηγό για να τον επικολλήσετε!

............................................................................................................................................

 .tooltip
{
position: relative;
background: #FEF9BF;
cursor: help;
display: inline-block;
text-decoration: none;
color: #0066B3;
outline: none;
}

.tooltip
{
position: relative;
background: #FEF9BF;
cursor: help;
display: inline-block;
text-decoration: none;
color: #809FFE;
outline: none;
}

.tooltip span
{
visibility: hidden;
position: absolute;
bottom: 30px;
left: 50%;
z-index: 999;
width: 230px;
margin-left: -127px;
padding: 10px;
border: 2px solid #00B366;
opacity: .9;
background-color: #80FEC8;
background-image: -webkit-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -moz-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.tooltip:hover
{
border: 0; /* IE6 fix */
}

.tooltip:hover span
{
visibility: visible;
}

.tooltip span:before,
.tooltip span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #ddd;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}

.tooltip span:before
{
border-top-color: #ccc;
bottom: -8px;
}

..........................................................................................................................................

Εάν θέλετε αλλάζετε και τα χρώματα στους  κόκκινους κωδικούς!

Εδώ ο Color Picker

Επικόλληση Css 

Αυτό ήταν τώρα όποτε θέλετε να χρησιμοποιήσετε tooltip θα πηγαίνετε στο Html section

της ανάρτησης και θα κάνετε επικόλληση αυτόν τον κώδικα:

..........................................................................................................................................

<a href="#" class="tooltip">
ΕΔΩ ΒΆΖΕΤΕ ΤΗΝ ΛΕΞΗ Η ΤΗΝ ΠΡΟΤΑΣΗ ΠΟΥ ΘΑ ΦΑΙΝΕΤΑΙ
<span>ΕΔΩ ΒΑΖΕΤΕ ΤΟ ΚΕΙΜΕΝΟ ΠΟΥ ΘΑ ΦΑΙΝΕΤΑΙ ΣΤΟ POP UP

ΠΑΡΑΘΥΡΟ </span>
</a>

.....................................................................................................................................

 # --->Εάν θέλετε να βάλετε και link το βάζετε στη θέση του # 

Γράφετε αυτά που θέλετε στα αντίστοιχα πλαίσια του κώδικα και πατάτε Δημοσίευση!