Ads 468x60px

Δευτέρα, 21 Οκτωβρίου 2013

Tooltip Hover Descriptions

Φίλες και φίλοι γεια σας, σε αυτή την ανάρτηση θα δούμε πως μπορούμε να προσθέσουμε
στα κείμενα μας και στις αναρτήσεις μας tooltips τα οποία είναι μικρά pop up παράθυρα
που αναδύονται, όταν περάσουμε τον κέρσορα πάνω από μία λέξη η πρόταση που
έχουμε ορίσει όπως βλέπετε εδώ! Αυτό είναι ένα tooltip window!
To script είναι κώδικας Css πολύ απλός στην εφαρμογή του και δεν έχει περιορισμούς!
Μπορείτε να βάζετε όσα Tooltips Εδώ βλέπετε άλλο ένα tooltip window θέλετε!

 Η εγκατάσταση είναι απλή και για να γίνει αυτό

 ακολουθείτε τα εξής βήματα 

Εγκατάσταση κώδικα Css

Κάντε αντιγραφή τον παρακάτω κώδικα και μετά ακολουθήστε τον 
εικονογραφημένο οδηγό για να τον επικολλήσετε!
............................................................................................................................................
 .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 το βάζετε στη θέση του

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

 Καλή επιτυχία!!!

 Πηγή κώδικα
 thanks tospiceupyourblog.com


 Edit by

0 σχόλια :

Δημοσίευση σχολίου

Icon Icon Icon

spice up your blog